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

在本文中，我们将学习如何使用 CSS 创建一个定向发光的3D按钮。这种类型的按钮看起来很棒，并且可以轻松地应用于大多数现代网站和应用程序上。让我们开始吧！

步骤1 - HTML 代码

首先，我们需要在 HTML 文件中创建一个按钮元素。以下是一个示例代码片段：

<button class="glow-button">Click me!</button>

步骤2 - CSS 代码

我们需要使用一些 CSS 样式来创建这个按钮。以下是一个示例代码片段：

.glow-button {
  background: #ff8a00;
  border: none;
  color: #fff;
  font-size: 24px;
  padding: 12px 24px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.glow-button::before {
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
  content: "";
  height: 65%;
  left: 50%;
  position: absolute;
  top: -30%;
  transform: translateX(-50%);
  width: 130%;
  z-index: -1;
}

.glow-button::after {
  background: rgba(255, 138, 0, 0.8);
  content: "";
  height: 0%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160%;
  z-index: -2;
  transition: height 0.3s, opacity 0.3s;
}

.glow-button:hover::after {
  height: 200%;
  opacity: 0;
}

步骤3 - 理解 CSS 代码

以上代码有三个部分，我们一一来分析。

.glow-button {
  background: #ff8a00;
  border: none;
  color: #fff;
  font-size: 24px;
  padding: 12px 24px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

这一部分代码负责设置按钮的一般样式，例如背景颜色、文字颜色、字体大小和内边距等。我们还设置了按钮元素的位置属性为相对。

.glow-button::before {
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
  content: "";
  height: 65%;
  left: 50%;
  position: absolute;
  top: -30%;
  transform: translateX(-50%);
  width: 130%;
  z-index: -1;
}

此部分代码使用伪元素 ::before 创建一个圆形的渐变背景，并将其放置在按钮的上面。我们使用了 radial-gradient() 函数，该函数用于创建一个圆形的渐变背景。我们通过使用百分比来设置伪元素的宽度和高度，并使用 translateX(-50%) 将其居中。

.glow-button::after {
  background: rgba(255, 138, 0, 0.8);
  content: "";
  height: 0%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160%;
  z-index: -2;
  transition: height 0.3s, opacity 0.3s;
}

此部分代码使用伪元素 ::after 来为按钮添加 3D 效果和发光。我们使用 rgba() 函数来设置半透明的背景颜色。我们还设置伪元素的高度为 0%，因此伪元素是不可见的。我们使用 transform 属性来居中伪元素。最后，我们使用过渡效果来实现当鼠标悬停在按钮上时伪元素爆发出来的效果。

.glow-button:hover::after {
  height: 200%;
  opacity: 0;
}

此部分代码用来设置当鼠标悬停在按钮上时，伪元素的高度和透明度。高度从 0% 到 200%，透明度从 0 到 1。

步骤4 - 运行效果

运行上述代码，我们得到一个漂亮的按钮，具有 3D 效果和发光，如下图所示：

总结

本文中，我们介绍了如何使用 CSS 来创建一个拥有 3D 效果和发光的按钮。CSS 很强大，可以用来创建很多惊人的效果。希望本文对您有所帮助。