边框加载霓虹灯按钮

边框加载霓虹灯按钮

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

html

  <a href="#">Button</a>
	<a href="#">Button</a>
	<a href="#">Button</a>

CSS

* {
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  box-sizing: border-box; /* 盒子大小规则 */
  font-family: sans-serif; /* 字体大小 */
}
body {
  display: flex; /* 弹性盒模型 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
  min-height: 100vh; /* 最小高度 */
  background-color: #000; /* 背景颜色 */
}
a {
  position: relative; /* 相对定位 */
  padding: 10px 30px;
  margin: 30px;
  color: #21ebff; /* 颜色 */
  text-decoration: none; /* 字体附加样式(清除下划线) */
  text-transform: uppercase; /* 字体大写 */
  letter-spacing: 2px; /* 字符间距 */
  font-size: 20px;
  transition: 0.5s; /* 过渡时间 */
  overflow: hidden; /* 超出隐藏 */
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0003); /* 镜像 */
}
a:nth-child(1) {
  filter: hue-rotate(115deg); /* 色调转换 */
}
a:nth-child(3) {
  filter: hue-rotate(270deg);
}
a:hover {
  background: #21ebff;
  color: #111;
  box-shadow: 0 0 50px #212121; /* 阴影(X,Y,模糊,颜色) */
  transition-delay: 0.5s; /* 等待时间 */
}
a::before { /* 之前添加(左上边框) */
  content: ''; /* 内容 */
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid #21ebff; /* 上边框 */
  border-left: 2px solid #21ebff;
  transition: 0.5s;
  transition-delay: 0.5s;
}

a::after { /* 之后添加(右下边框) */
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #21ebff;
  border-right: 2px solid #21ebff;
  transition: 0.5s;
  transition-delay: 0.5s;
}
a:hover::before,a:hover::after {
  /* 通过修改宽高实现边框线的移动 */
  width: 100%;
  height: 100%;
  /* 等待时间0,直接移动,防止按钮先变色 */
  transition-delay: 0s;
}

JS

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）