按钮模版：btn-dark-3

预览效果

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  width: 100%;
  height: 200px;
}
@keyframes flow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.btn-dark-3 {
  position: relative;
  border-radius: 6px;
  color: #fff;
  z-index: 2;
  overflow: hidden;
  padding: 3px;
  border: none;
  cursor: pointer;
}
.btn-dark-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    115deg,
    #4fcf70,
    #fad648,
    #a767e5,
    #12bcfe,
    #44ce7b
  );
  background-size: 50% 100%;
}
.btn-dark-3:hover:before {
  animation: flow 0.75s linear infinite;
}
.btn-dark-3 span {
  position: relative;
  display: block;
  height: 100%;
  z-index: 2;
  padding: 16px 28px;
  align-items: center;
  background: #000;
  border-radius: 3px;
}

代码解析

HTML 结构

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

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

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

CSS 实现原理

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

1. 渐变背景：通过 ::before 伪元素创建一个 200% 宽度的多色渐变背景
2. 流动动画：当鼠标悬停时，渐变背景通过 flow 动画实现水平移动效果
3. 深色前景：span 元素作为前景层，设置深色背景与渐变背景形成对比
4. 圆角设计：按钮和内部元素分别使用不同半径的圆角，增强视觉层次感

使用方法

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

浏览器兼容性

注意事项

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