如何使用 CSS 创建定向发光的 3D 按钮？

定向发光的 3D 按钮是一种效果，其中按钮显示为 3D 图形。这些按钮是使用 HTML 和 CSS 创建的。

方法：为 HTML 对象设置动画的最佳方式是使用 CSS 变换并在不同阶段设置变换。

• 创建一个 HTML 文件。
• 将提供所有动画效果的 HTML 中的 CSS 文件链接到我们的 HTML。
• 添加三个锚 标记用于创建按钮并为它们分配特定的类。

HTML 代码：

HTML

  

    
    
    
    
    

  

    

        

            

                
                    
                    Like
                
            
            

                
                    
                    Comment
                
            
            

                
                    
                    Share
                
            
        
    

  

CSS 代码：以下是上述 HTML 代码中使用的“buttons.css”文件的内容。 CSS 用于为我们的 HTML 页面提供不同类型的动画、变换和效果，使其看起来对所有用户都具有交互性。恢复所有浏览器效果。使用类和 id 为按钮提供效果。使用变换来提供定向发光的 3D 按钮。

按钮.css

*{
    margin: 0;
    padding: 0;
}
  
div{
    background: lightgreen;
    width: 100vw;
    height: 100vh;
    font-family: 'Segoe UI', Tahoma, 
        Geneva, Verdana, sans-serif;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
ul{
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0;
}
  
a{
    text-decoration: none;
    color: rgba(0,0,0,0.7);
}
  
i{
    padding: 10px;
}
  
ul li{
    list-style: none;
    margin: 10px;
    display: block;
}
  
ul li a{
    width: 200px;
    height: 50px;
    background: orangered;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg) skewX(25deg);
    box-shadow: -20px 20px 8px;
    rgba(0,0,0,0.5);
}
  
ul li a:before{
    content:'';
    position:absolute;
    top:10px;
    left:-20px;
    background:orangered;
    height:100%;
    width:20px;
    transform:rotate(0deg) skewY(-45deg);
}
  
ul li a:after{
    content:'';
    position:absolute;
    bottom:-20px;
    left:-10px;
    background:orangered;
    height:20px;
    width:100%;
    transform:rotate(0deg) skewX(-45deg);
}
  
li a:hover{
    transform:rotate(-30deg) skew(25deg) translate(20px,-15px);
}

输出：

3D 发光按钮