按钮模版：btn-1

效果展示

实现思路

通过背景渐变、阴影、圆角等，使得整个按钮看起来更加立体和有质感

定义一个 @keyframes 动画来控制按钮文字颜色的变化

当鼠标悬停在按钮上时，通过 :hover 伪类触发 animation ，使文字颜色不断变化

实现代码

1
<button class="btn-1">btn-1</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@keyframes btn-1 {
  0% {
    color: #8ca7d0;
  }
  50% {
    color: #e9f0ff;
  }
  100% {
    color: #8ca7d0;
  }
}
.btn-1 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(-45deg, #fff, #e9f0ff);
  box-shadow: 4px 4px 5px 0 rgba(166, 180, 211, 0.2);
  color: #8ca7d0;
  border: none;
  cursor: pointer;
}
.btn-1:hover {
  animation: btn-1 .8s ease infinite;
}