按钮模版：btn-3

效果展示

实现思路

使用 ::before 伪元素绘制一个与按钮形状相同的半透明黑色遮罩

并使用 opacity 属性控制它在默认状态下的不透明度为 0

当鼠标悬停在按钮上时，将其 opacity 属性值改变以显示出遮罩层，并通过 transition 属性实现平滑渐变过渡效果

同时，使用 ::after 伪元素在按钮内部绘制一个带有模糊效果的渐变色背景

该伪元素的不透明度也在默认情况下被设置为 0

在鼠标悬停时，使用 opacity 属性将其透明度从 0 改为 1，同时使用 transition 属性使其淡入效果更加平滑和自然

实现代码

1
2
3
<button class="btn-3">
  <span>BTN-3</span>
</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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.btn-3 {
  border: none;
  cursor: pointer;
  position: relative;
  padding: 16px 28px;
  border-radius: 8px;
  background: linear-gradient(45deg, #feac5e, #c779d0, #4bc0c8);
}

.btn-3 span {
  position: relative;
  color: #fff;
  z-index: 9;
}

.btn-3::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #272727;
  border-radius: 7px;
  transition: .3s;
}

.btn-3:hover::before {
  opacity: .6;
}

.btn-3::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #feac5e, #c779d0, #4bc0c8);
  border-radius: 7px;
  filter: blur(12px);
  opacity: 0;
  transition: .3s;
}

.btn-3:hover::after {
  opacity: 1;
}