实现方案

简单按钮实现

按钮一般分为三种状态，普通 鼠标移入 点击，一般状态切换，只是改变背景颜色，字体颜色，鼠标移入通过:hover伪类实现，点击使用:active伪类实现，简单的代码如下：

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
.btn {
    display: inline-block;
    padding: 8px 10px;
    background: blue;
    border-radius: 5px;
    color: #fff;
    border: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    text-decoration: none;
    transition: .3s;
}
/* hover 要在active 前面*/

.btn:hover {
    background: red;
}
.btn:active {
    background: yellow;
    color: #000;
}
/* loading状态禁用点击等事件，表单按钮直接加loading状态，不用判断是否loading状态，来确定是否发请求，本身loading状态的按钮就变成不可点击了 */
.btn.loading {
    pointer-events: none;
}

效果如下：

a按钮