CSS 如何创建有方向感的3D按钮

你的网站的每一个部分都是重要的。你的网站按钮不仅仅是装饰，它们是至关重要的设计元素，有助于讲述你的业务故事，并将人们引向你的产品或服务。虽然基本的按钮是功能性的，但你可以更进一步，添加迷人的效果，比如当你悬停在上面时，按钮会改变颜色，有阴影的按钮，禁用的按钮，或一组按钮。按钮可以把我们带到其他页面，或执行一些动作，如提交表格或进行购买。

你最好的建设方法是什么？使用CSS（层叠样式表）创建按钮。CSS是一种定义和描述HTML中元素呈现方式的技术。使用CSS编辑器，你可以改变网页的每一个组成部分，从页眉和页脚到边栏和按钮。在这篇文章中，我们将讨论如何使用CSS创建有方向性的3D按钮。

首先，让我们看看我们需要的一些CSS属性。

Font Awesome 图标

Font Awesome Free 5 用于字体家族，以便在下载链接旁边添加文件格式类型的图标。它与CSS中的内联元素一起使用。Font Awesome是一个库，它包含了数千个指定用于各种事物的图标列表。每个图标都有一个独特的Unicode值。以下是一些图标的例子，以及它们的代码。

fa fa-file-excel-o	Excel图标
fa-file-powerpoint-o	Powerpoint图标
fa-file-word-o	MS Word图标

盒状阴影属性

Box-shadow属性使开发者能够为一个元素应用一个或多个阴影。只要用逗号隔开，就可以分配多个效果。

语法

box-shadow: value;

这个属性的值是 –

None - 不在元素上显示阴影。它是默认值。
Offset-X – 阴影在水平方向上应该被推离元素的多远。正的偏移量-X值在元素的右边投下阴影。负值则是将元素的阴影向左移动。
Offset-Y – 阴影应该在垂直方向上与元素保持多大的距离。正的偏移-Y值产生元素上方的阴影，而负值则提供元素下方的阴影。
Blur-radius - 它指定了阴影的清晰度。数字越大，阴影就越模糊，这意味着阴影会更大、更轻。
**Spread ** - 半径 – 它指定了阴影的大小。如果它的值是正的，那么大小就会增加。如果它是负的，那么大小就会减少。
Color – 它指定了阴影的颜色。

:before 伪选择器

:before CSS选择器是用来在一个元素的内容之前插入一些东西。

:after 伪选择器

::after CSS选择器用于在一个元素的内容之后插入一些东西。内容属性指定了要写在所选元素之后或之前的内容。

CSS变换属性

视觉格式化模型的坐标空间可以通过CSS中的变换属性来改变。这被用来赋予组件，如倾斜、缩放、旋转和平移的效果。

语法

transform: none| transform-functions| initial| inherit;

价值

translate(x, y) – 这个函数定义了一个沿X和Y坐标的平移。
translate3d(x, y, z) – 这个函数提供了一个沿X、Y和Z坐标的平移。
rotate(angle) – 它用于定义旋转轴的角度。
scale(x, y) – 这个函数指定了沿X和Y轴的比例变换。
scale3d(x, y, z) – 沿着X、Y和Z轴，指定比例转换。
skew(angle, angle) – 沿着X、Y和Z轴，它定义了角度变换。沿着X轴和Y轴，定义了倾斜变换，相当于倾斜角度。
initial – 为该元素设置默认值。
inherit – 它采用其父元素的值。

需要遵循的步骤

创建三个元素来创建按钮，并为它们添加不同的ID。

使用嵌套方法和伪元素（如:before和:after）给按钮添加3D效果。

使用 CSS Font awesome icons，根据你的选择添加图标。
使用CSS变换属性，给按钮以适当的排列。使用box shadow属性给按钮元素添加阴影。

例子

下面的例子演示了如何创建有方向性的3D按钮。

<!DOCTYPE html>
<html>
<head>
   <title> Directionally Lit 3D Buttons </title>
   <link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
   <style>
      *{
         margin: 0;
         padding: 0;
      }
      div {
         display: flex;
         align-items: center;
         justify-content: center;
         background: #E1C16E;
         margin: 0;
         padding: 10px;
         width: 99vw;
         height: 98vh;
         font-family: 'Times New Roman', Calibri,
         Georgia, Verdana, serif;
         position: relative;
      }
      ul {
         position: absolute;
         display: flex;
         margin: 5px 5px;
         padding: 2px 2px;
      }
      i {
         padding: 11px;
      }
      a {
         text-decoration: none;
         color: white;
         letter-spacing: 1px;
         font-family: cursive;
      }
      ul li {
         list-style: none;
         margin: 15px;
         display: block;
      }
      ul li a {
         width: 150px;
         height: 100px;
         margin: 40px;
         background: cyan;
         display: flex;
         font-size: 20px;
         align-items: center;
         border-radius: 10%;
         justify-content: center;
         transform: rotate(-25deg) skewX(30deg);
         box-shadow: -35px 30px 20px white;
      }
      ul li a:before {
         content: '';
         position: absolute;
         top: 15px;
         left: -20px;
         background: cyan;
         border-radius: 10%;
         height: 100%;
         width: 25px;
         transform: rotate(10deg) skewY(-55deg);
      }
      ul li a:after {
         content: '';
         position: absolute;
         bottom: -20px;
         left: -10px;
         background: cyan;
         border-radius: 10%;
         height: 30px;
         width: 98%;
         transform: rotate(10deg) skewX(-60deg);
      }
      li a:hover {
         transform: rotate(-25deg) skew(35deg) translate(18px, -19px);
      }
   </style>
</head>
<body>
   <div>
      <h1> 3D Buttons </h1>
      <ul>
         <li id= "excel">
            <a href= "#"> <i class= "fa fa-file-excel-o" style= "color:green"> </i> MS Excel </a>
         </li>
         <li id= "powerpoint">
            <a href= "#"> <i class= "fa fa-file-powerpoint-o" style= "color:red"> </i> Powerpoint</a>
         </li>
         <li id= "word"> <a href= "#"> <i class= "fa fa-file-word-o" style= "color:blue"> </i> MS Word </a></li>
      </ul>
   </div>
</body>
</html>