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

在现代 web 界面设计中，按钮是一种很常用的控件，通过 AJAX 技术实现的异步数据加载也给按钮带来了更多的应用场景。一个富有创意的、视觉冲击力强的按钮，能够吸引用户的眼球，增加交互体验的趣味性。本文就介绍一种通过使用 CSS 实现的闪亮霓虹按钮效果，配置简单，效果显著，值得程序员学习和运用。

首先，我们要了解一下所要使用到的 CSS 属性和方法：

• transition：(transition-duration, transition-timing-function, transition-property, transition-delay) 用于控制 CSS 属性的平滑过渡。
• transform: 通过旋转、缩放、倾斜、偏移等方式来改变元素的渲染。
• linear-gradient：产生一个水平、垂直或对角向的渐变效果。
• box-shadow：用来阴影效果，除了灰色阴影，还可以用来创建按钮发光的效果。

接下来，让我们来一步步实现这个闪亮霓虹按钮的效果。

HTML 结构

我们需要先定义一个按钮的 HTML 结构。在这里，我们使用一个 button 元素。

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

注意，按钮的 CSS 类名为 neon-button，后面会在 CSS 文件中定义该类的样式。

CSS 样式

1. 定义按钮正常状态下、鼠标悬停状态下、被点击状态下的基本样式

.neon-button {
  background-color: #141414;
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 2px;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.neon-button:hover {
  cursor: pointer;
  transform: translate3d(0px, -3px, 0px);
}

.neon-button:active {
  transform: translate3d(0px, 0px, 0px);
}

2. 定义按钮被悬停时的阴影效果

.neon-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translate3d(-110%, 0, 0) rotate(45deg);
  transition: all 0.4s ease-in-out;
}

.neon-button:hover::before {
  transform: translate3d(0, 0, 0);
}

3. 定义按钮被悬停时的光晕效果

.neon-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 255, 255, 0.5), 0 0 80px rgba(255, 255, 255, 0.5);
  transition: all 0.4s ease-in-out 0.1s;
}

.neon-button:hover::after {
  width: 300px;
  height: 300px;
  transition: all 0.5s ease-in-out;
}

4. 定义按钮被悬停时的文本渐变效果

.neon-button span {
  position: relative;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  z-index: 1;
}
.neon-button span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #0ff, #f0f, #ff0, #0ff);
  z-index: -1;
  filter: blur(15px);
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

.neon-button:hover span::before {
  opacity: 1;
}

到此，一个闪亮霓虹按钮的效果就完成了。可以在本地或者在线 HTML 文件中运行效果，看看最终的效果。

总结

本文介绍了一种通过使用 CSS 实现的闪亮霓虹按钮效果，通过控制按钮的背景、阴影、光晕、文本等元素的属性和动画效果，打造出一个具有鲜明视觉冲击力的富有创意的按钮，可以提升 web 应用的用户体验感。

参考文献

[1] https://css-tricks.com/creating-a-neon-button-effect-using-css/