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

效果图

效果图

说明

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

源代码

html代码

    
    
    
    
    
    
    




    

        

            
                
                 - Like 
            
        
        

            
                
                 - Comment 
            
        
        

            
                
                 - Share 
            
        
        

            
                
                 - Subscribe 
            
        
    

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;
}