按钮模版：btn-dark-2

预览效果

<div class="container">
  <button class="btn-dark-2"><span>View Room</span></button>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  width: 100%;
  height: 200px;
}

.btn-dark-2 {
  border: none;
  cursor: pointer;
  position: relative;
  padding: 16px 28px;
  border-radius: 8px;
  background: linear-gradient(45deg, #feac5e, #c779d0, #4bc0c8);
}
.btn-dark-2 span {
  position: relative;
  color: #fff;
  z-index: 9;
}
.btn-dark-2::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #272727;
  border-radius: 7px;
  transition: 0.3s;
}
.btn-dark-2:hover::before {
  opacity: 0.6;
}
.btn-dark-2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #feac5e, #c779d0, #4bc0c8);
  border-radius: 7px;
  filter: blur(12px);
  opacity: 0;
  transition: 0.3s;
}
.btn-dark-2:hover::after {
  opacity: 1;
}

代码解析

HTML 结构

按钮的 HTML 结构简洁明了，由一个 button 元素和一个包含文本的 span 元素组成：

<button class="btn-dark-2"><span>View Room</span></button>

span 元素用于在视觉效果中确保文本始终可见，并通过 z-index 设置将其置于最顶层。

CSS 实现原理

该按钮设计的核心技术在于多层叠加和悬停效果：

1. 渐变背景：按钮本身设置了一个三色渐变背景 (#feac5e, #c779d0, #4bc0c8)，创造出霓虹般的视觉效果

2. 内部深色背景：通过 ::before 伪元素在按钮内部创建一个深色背景层，与外层的渐变形成对比

3. 模糊发光效果：通过 ::after 伪元素创建一个与按钮相同的渐变背景，并使用 filter: blur(12px) 实现发光效果

4. 悬停交互：当鼠标悬停在按钮上时：

   • 内部深色背景的透明度降低（opacity: 0.6），让底层的渐变背景透出来
   • 模糊发光效果从不可见变为可见（opacity: 1），增强视觉吸引力

使用方法

1. 复制 HTML 结构：将 HTML 代码块中的容器和按钮元素复制到你的网页中。
2. 添加 CSS 样式：将 CSS 代码块中的样式规则复制到你的样式表中。
3. 调整按钮大小：可以修改 padding 属性值来调整按钮的大小。
4. 自定义颜色方案：可以替换渐变中的颜色值 (#feac5e, #c779d0, #4bc0c8) 来修改配色。
5. 调整过渡效果：可以修改 transition 属性中的 0.3s 值来调整悬停效果的过渡速度。

浏览器兼容性

注意事项

1. 浏览器兼容性：所有主流现代浏览器都支持此功能
2. 性能考虑：动画效果简单，对性能影响较小