按钮模版：btn-6

效果展示

实现思路

当鼠标悬浮在按钮上时，背景颜色和字体颜色变化

适合用于一些简洁、现代的页面

实现代码

1
<button class="btn-6">BTN-6</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.btn-6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 16px 28px;
  border: 2px solid #3498db;
  border-radius: 4px;
  background-color: transparent;
  color: #3498db;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.btn-6:hover {
  background-color: #3498db;
  color: #fff;
}