如何实现渐变色的按钮?(边框、文字渐变)

27 阅读1分钟

Clipboard_Screenshot_1764139395.png

类似这种效果,如何实现?难点在于边框渐变实现、如何实现文字渐变且不影响背景色

<div class="tab_btn">
  <div class="tab_btn_bg"></div>
  <div class="tab_btn_bg2"></div>
  <div class="tab_btn_inner">立即体验</div>
</div>
.tab_btn {
  position: relative;
  width: 168px;
  height: 54px;
  line-height: 54px;
  font-size: 24px;
  text-align: center;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid transparent;
}
.tab_btn_bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(86deg, #2795F8 23.03%, #5E4BFD 85.04%);
}
.tab_btn_bg2 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 1px;
  border-radius: inherit;
  background: #f5fbff;
}
.tab_btn_inner {
  position: relative;
  background: linear-gradient(86deg, #2795F8 23.03%, #5E4BFD 85.04%);
  background-clip: text;
  -webkit-background-clip: text;
  color: #2049EE;
  -webkit-text-fill-color: transparent;
}

原理参考这篇文章juejin.cn/post/715997…