按钮模版：btn-dark-1

预览效果

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

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

/* 定义边框流动动画 */
@keyframes toTop {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

@keyframes toBottom {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

@keyframes toLeft {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

@keyframes toRight {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

/* 按钮基本样式 */
.btn-dark-1 {
  position: relative;
  padding: 16px 28px;
  color: #03e9f4;
  background: transparent;
  overflow: hidden;
  transition: 0.5s;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
}

/* 鼠标悬停效果 */
.btn-dark-1:hover {
  background: #03e9f4;
  color: #000;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px
      #03e9f4;
}

/* 边框线基础样式 */
.btn-dark-1 span {
  position: absolute;
  display: block;
}

/* 顶部边框动画 */
.btn-dark-1 span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: toRight 1s linear infinite;
}

/* 右侧边框动画 */
.btn-dark-1 span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: toBottom 1s linear infinite;
  animation-delay: 0.25s;
}

/* 底部边框动画 */
.btn-dark-1 span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: toLeft 1s linear infinite;
  animation-delay: 0.5s;
}

/* 左侧边框动画 */
.btn-dark-1 span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: toTop 1s linear infinite;
  animation-delay: 0.75s;
}

代码解析

HTML 结构

按钮的 HTML 结构非常简洁，由一个button元素和 4 个空的span元素组成：

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

这 4 个span元素将被 CSS 定位并用于创建流动的边框效果。

CSS 动画原理

该按钮的核心技术在于 CSS 动画的巧妙运用：

1. 四个方向的动画：定义了toTop、toBottom、toLeft、toRight四个关键帧动画

2. 线性渐变背景：使用linear-gradient创建从透明到主色的渐变效果

3. 延迟动画：通过animation-delay属性为不同边框设置不同的动画延迟，形成连续流动的视觉效果

4. 无限循环：所有动画设置为linear infinite，实现不间断的流动效果

使用方法

1. 复制 HTML 结构：将 HTML 代码块中的容器和按钮元素复制到你的网页中。
2. 添加 CSS 样式：将 CSS 代码块中的样式规则复制到你的样式表中。
3. 调整按钮大小：可以修改padding属性值来调整按钮的大小。
4. 自定义颜色方案：可以将#03e9f4替换为你喜欢的颜色值。
5. 调整动画速度：可以修改animation属性中的1s值来调整动画速度。

浏览器兼容性

相关信息

• 表格中的数字表示该浏览器开始支持的最低版本
• "No" 表示该浏览器不支持此功能

注意事项

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