按钮模版：btn-5

效果展示

实现思路

使用 ::before 伪元素绘制了一个竖条边框，并使用 position 属性将其相对于按钮进行定位

在鼠标悬停时修改文字颜色为白色，同时也修改 ::before 的宽度为 100%，使得整个左侧边框的宽度变为全部宽度

在鼠标悬停时对样式进行修改能够为用户提供更好的视觉反馈

实现代码

1
<button class="btn-5">BTN-5</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
.btn-5 {
  width: 120px;
  height: 52px;
  position: relative;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: transparent;
  transition: all 0.4s ease-in-out;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.btn-5:before {
  content: '';
  width: 4px;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
}
.btn-5:hover {
  color: #fff;
}
.btn-5:hover:before {
  width: 100%;
}