如何使用 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 icon |
fa fa-file-powerpoint-o |
Powerpoint icon |
fa fa-file-word-o |
MS Word icon |
box-shadow 属性
box-shadow 属性使开发者能够为元素应用一个或多个阴影。只需用逗号分隔即可指定多个效果。
语法
box-shadow: value;
此属性的值为 −
None- 元素上不显示阴影。这是默认值。
Offset-X - 阴影应在水平方向上远离元素的距离。正的 offset-X 值会在元素的右侧投射阴影。相反，负值会将元素的阴影向左移动。
Y 轴偏移 – 阴影与元素的垂直距离。Y 轴偏移为正值时，阴影位于元素上方;为负值时，阴影位于元素下方。
模糊半径 – 指定阴影的清晰度。数值越大，阴影越模糊，这意味着阴影会更大更亮。
扩展半径 – 指定阴影的大小。如果值为正值，则大小会增加。如果为负数，则尺寸减小。
Color – 指定阴影的颜色。
:before 伪选择器
:before CSS 选择器用于在元素内容之前插入内容。
:after 伪选择器
:after CSS 选择器用于在元素内容之后插入内容。content 属性指定在选定元素之后或之前写入的内容。
CSS Transform 属性
可以使用 CSS 中的 transform 属性更改视觉格式化模型的坐标空间。该属性用于为组件提供倾斜、缩放、旋转和平移效果。
语法
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 − 继承其父元素的值。
需遵循的步骤
创建三个 <a>用于创建按钮的元素，并为其添加不同的 ID。
使用嵌套方法和伪元素(例如 :before 和 :after)为按钮添加 3D 效果。
使用 CSS Font awesome 图标根据您的选择添加图标。
使用 CSS transform 属性，为按钮设置适当的对齐方式。使用 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 属性(例如 transform、伪选择器、box-shadow 属性和 Font Awesome 图标)创建定向发光的 3D 按钮。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
