如何为样式化Link（按钮）添加加载动效作为点击吸引装饰？

下面提供两种适配你现有按钮的动效方案，用来模拟加载风格的装饰效果，吸引访客点击：

方案一：背景扫光流动动画 #

通过半透明渐变遮罩的滑动，模拟加载时的扫光效果，视觉上更醒目：

完整代码 #

.styledlink {
  border: .1px solid green;
  padding: 5px 12px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  background-color: green;
  /* 动效核心样式 */
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.styledlink::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: loadingShine 1.5s infinite;
  z-index: -1;
}

@keyframes loadingShine {
  to {
    left: 100%;
  }
}

<a class="styledlink" href="https://google.com">Click here</a>

效果说明 #

• 用伪元素创建半透明渐变遮罩，通过关键帧动画让它从左到右循环滑动，不会影响按钮文字的可读性
• overflow: hidden限制遮罩范围，z-index保证文字始终在动效上方

方案二：边框流动加载动画 #

如果想要贴近传统加载的边框动效，可采用动态渐变边框的方式：

完整代码 #

.styledlink {
  border: .1px solid green;
  padding: 5px 12px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  background-color: green;
  /* 动效核心样式 */
  position: relative;
}

.styledlink::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: linear-gradient(green, green) padding-box,
              linear-gradient(90deg, rgba(255,255,255,0.5), transparent, rgba(255,255,255,0.5)) border-box;
  background-size: 200% 100%;
  animation: borderLoading 2s infinite linear;
}

@keyframes borderLoading {
  to {
    background-position: 200% 0;
  }
}

<a class="styledlink" href="https://google.com">Click here</a>

效果说明 #

• 利用CSS背景盒模型，让边框呈现循环流动的渐变效果，外层伪元素不影响原按钮的点击区域
• 可通过调整animation的时长参数（比如1.5s改成2s）控制动效速度

自定义调整提示 #

• 动效的透明度、颜色可根据按钮色调修改，比如把rgba(255,255,255,0.3)换成其他半透明色
• 如果需要点击后暂停动效，可给按钮添加额外类，通过animation-play-state: paused实现

内容的提问来源于stack exchange，提问作者Garry Clarkston