效果圖
效果圖
說明
- 雙擊index.html 文件，通過瀏覽器打開即可查看效果
- html 和 css 代碼分別保存在index.html 和 main.css 文件中
- 由于使用了網(wǎng)絡(luò)資源，所以需要聯(lián)網(wǎng)使用，否則可能無法正常顯示
源代碼
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3D 按鈕</title>
<link rel="stylesheet" >
<!--引入css文件-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<ul>
<li>
<a href="#">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<span> - Like </span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-comments" aria-hidden="true"></i>
<span> - Comment </span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-share" aria-hidden="true"></i>
<span> - Share </span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-heart" aria-hidden="true"></i>
<span> - Subscribe </span>
</a>
</li>
</ul>
</body>
</html>
css代碼
*{
margin: 0;
padding: 0;
}
body{
background-color: #cccccc;
font-family: sans-serif;
}
ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}
li{
list-style: none;
margin: 0 5px;
}
/* 圖標(biāo) */
ul li a .fa{
font-size: 40px;
color: #333333;
line-height: 80px;
transition: 0.5s;
padding-right: 14px;
}
/* 文字 */
ul li a span{
position: absolute;
top: 30px;
color: #333333;
/* 字符間距 */
letter-spacing: 4px;
transition: 0.5s;
}
ul li a{
text-decoration: none;
display: block;
width: 210px;
height: 80px;
background: #fff;
padding-left: 20px;
transform: rotate(-30deg) skewX(25deg) translate(0 , 0);
transition: 0.5s;
box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
}
ul li a::before{
content: '';
position: absolute;
top: 10px;
left: -20px;
height: 100%;
width: 20px;
background: #b1b1b1;
transition: 0.5s;
transform: rotate(0deg) skewY(-45deg);
}
ul li a::after{
content: '';
position: absolute;
bottom: -20px;
left: -10px;
height: 20px;
width: 100%;
background: #b1b1b1;
transition: 0.5s;
transform: rotate(0deg) skewX(-45deg);
}
ul li a:hover{
transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}
ul li:hover .fa{
color: #ffffff;
}
ul li:hover span{
color: #ffffff;
}
ul li:hover a{
background: #dd4b39;
}
ul li:hover a::before{
background: #b33a2b;
}
ul li:hover a::after{
background: #e66a5a;
}
