极客教程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 – 它采用其父元素的值。
需要遵循的步骤
-
使用嵌套方法和伪元素（如: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>
结语
在这篇文章中，我们讨论了如何使用CSS属性，如变换、伪选择器、盒影属性和字体超强的图标，来创建定向发光的3D按钮。