如何使用 CSS 创建方向光照 3D 按钮？

您网站的每个部分都很重要。您的网站按钮不仅仅是装饰；它们是至关重要的设计元素，有助于讲述您业务的故事并引导用户访问您的产品或服务。虽然基本按钮具有功能性，但您可以更进一步并添加引人入胜的效果，例如当您将鼠标悬停在按钮上时颜色会发生变化的按钮、带阴影的按钮、禁用的按钮或按钮组。按钮可以将我们带到其他页面或执行诸如提交表单或进行购买等操作。

您构建的最佳选择是什么？使用 CSS（层叠样式表）创建按钮。CSS 是一种定义和描述如何呈现 HTML 中元素的技术。使用 CSS 编辑器，您可以更改网页的每个组件，从标题和页脚到侧边栏和按钮。在本文中，我们将讨论如何使用 CSS 创建方向光照 3D 按钮。

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

Font Awesome 图标

Font Awesome 免费版 5 用于字体系列，以便在下载链接旁边添加文件格式类型的图标。它与 CSS 中的内联元素一起使用。Font Awesome 是一个包含数千个为各种事物指定的图标列表的库。每个图标都有一个唯一的 Unicode 值。以下是几个图标及其代码的示例。

fa fa-file-excel-o

Excel 图标

fa fa-file-powerpoint-o

Powerpoint 图标

fa fa-file-word-o

MS Word 图标

box-shadow 属性

box-shadow 属性 使开发人员能够将一个或多个阴影应用于元素。只需用逗号分隔即可分配多个效果。

语法

box-shadow: value;

此属性的值为：

  • 无- 元素上不显示阴影。这是默认值。

  • 水平偏移量– 阴影在水平方向上应远离元素多远。正水平偏移量值会在元素的右侧投下阴影。另一方面，负值将元素的阴影移到左侧。

  • 垂直偏移量– 阴影应在垂直方向上与元素相距多远。正垂直偏移量值会在元素上方产生阴影，而负值会在元素下方提供阴影。

  • 模糊半径- 它指定阴影的清晰度。数字越大，阴影越模糊，这意味着阴影会更大更浅。

  • 扩展- 半径 – 它指定阴影的大小。如果其值为正，则大小增加。如果为负，则大小减小。

  • 颜色– 它指定阴影的颜色。

：before 伪选择器

：before CSS 选择器用于在元素内容之前插入某些内容。

：after 伪选择器

::after CSS 选择器用于在元素内容之后插入某些内容。content 属性指定要在所选元素之前或之后编写的內容。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

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 轴定义倾斜变换，这等效于倾斜角。

  • 初始 − 为元素设置默认值。

  • 继承 − 它采用其父元素的值。

操作步骤

  • 创建三个 <a> 元素以创建按钮，并为其添加不同的 ID。

  • 使用嵌套方法和 :before 和 :after 等伪元素为按钮提供 3D 效果。

  • 根据您的选择使用 CSS Font Awesome 图标添加图标。

  • 使用 CSS transform 属性，正确对齐按钮。使用 box-shadow 属性为按钮元素添加阴影。

示例

以下示例演示了如何创建方向光照 3D 按钮。

Open Compiler
<!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 按钮。

更新于：2023 年 2 月 20 日

170 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告