无需JS便可实现的炫酷3D按钮效果，简单易上手，做完成就感爆棚!!

效果图

说明

双击index.html 文件，通过浏览器打开即可查看效果
html 和 css 代码分别保存在index.html 和 main.css 文件中
由于使用了网络资源，所以需要联网使用，否则可能无法正常显示

源代码

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" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--引入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;
}
/* 图标 */
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;
}