使用 CSS 的闪亮霓虹按钮效果

在现代的网站设计中，按钮是不可或缺的元素之一。通过添加特效或修改样式，可以使网站按钮更加丰富多彩。在本文中，我们将介绍如何使用 CSS 实现一个令人惊叹的闪亮霓虹按钮效果。

首先，我们需要创建一个按钮元素。考虑以下代码：

<button class="neon-button">Click me</button>

然后，在 CSS 中，我们可以开始定义按钮的样式和动画，如下所示：

.neon-button {
  background-color: #3737d1;
  color: #fff;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  position: relative;
  overflow: hidden;
}

.neon-button:before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(255,255,255,0.5);
  transform: rotate(45deg);
  transition: all 1s ease;
  opacity: 0;
}

.neon-button:hover:before {
  top: -10%;
  left: -10%;
  opacity: 1;
}

.neon-button:after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(255,255,255,0.2);
  transition: all 1s ease;
  opacity: 0;
}

.neon-button:hover:after {
  top: -20%;
  left: -20%;
  opacity: 1;
}

在这段 CSS 代码中，我们首先定义了按钮的基本样式：背景颜色、字体颜色、边框半径、内边距等。接下来，我们使用伪元素 :before 和 :after 创建了两个矩形元素，分别用于显示闪烁的光效。

这两个矩形元素的位置被设置在按钮的中心，大小为按钮大小的两倍。它们的背景颜色分别为半透明和浅透明的白色。而且，为了让它们在按钮上出现动画效果，需要对它们的位置、透明度等属性设置 CSS 动画。

最后，在按钮元素上添加:hover 伪类，即鼠标悬停时的状态，使两个伪元素自由闪烁。

现在，我们已经成功地创建了一个闪亮霓虹按钮效果。您可以根据自己的需要修改按钮的样式和动画，以适应不同的网站风格。

参考资料：CSS Button With Neon Light Effect。

返回Markdown格式：

# 使用 CSS 的闪亮霓虹按钮效果

在现代的网站设计中，按钮是不可或缺的元素之一。通过添加特效或修改样式，可以使网站按钮更加丰富多彩。在本文中，我们将介绍如何使用 CSS 实现一个令人惊叹的闪亮霓虹按钮效果。

首先，我们需要创建一个按钮元素。考虑以下代码：

```html
<button class="neon-button">Click me</button>

然后，在 CSS 中，我们可以开始定义按钮的样式和动画，如下所示：

.neon-button {
  background-color: #3737d1;
  color: #fff;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  position: relative;
  overflow: hidden;
}

.neon-button:before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(255,255,255,0.5);
  transform: rotate(45deg);
  transition: all 1s ease;
  opacity: 0;
}

.neon-button:hover:before {
  top: -10%;
  left: -10%;
  opacity: 1;
}

.neon-button:after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: rgba(255,255,255,0.2);
  transition: all 1s ease;
  opacity: 0;
}

.neon-button:hover:after {
  top: -20%;
  left: -20%;
  opacity: 1;
}

在这段 CSS 代码中，我们首先定义了按钮的基本样式：背景颜色、字体颜色、边框半径、内边距等。接下来，我们使用伪元素 :before 和 :after 创建了两个矩形元素，分别用于显示闪烁的光效。

这两个矩形元素的位置被设置在按钮的中心，大小为按钮大小的两倍。它们的背景颜色分别为半透明和浅透明的白色。而且，为了让它们在按钮上出现动画效果，需要对它们的位置、透明度等属性设置 CSS 动画。

最后，在按钮元素上添加:hover 伪类，即鼠标悬停时的状态，使两个伪元素自由闪烁。

现在，我们已经成功地创建了一个闪亮霓虹按钮效果。您可以根据自己的需要修改按钮的样式和动画，以适应不同的网站风格。

参考资料：CSS Button With Neon Light Effect。