通过一个按钮来学习关于用户行为的伪类选择器

这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第二十九篇-《通过一个按钮来学习关于用户行为的伪类选择器》

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

本篇文章将来学习用户行为伪类选择器，该篇文章中的主要内容如下图所示：

按钮元素

在HTML中的按钮元素，一般情况下指的就是<button>元素，这是一个双标签元素，如下代码展示了<button>元素的用法：

<button>这是一个按钮</button>

代码的运行结果如下所示：

该元素还存在一个disabled属性，该属性表示按钮为是否为禁用状态，disabled属性的用法如下所示：

<button disabled>这是一个禁用的按钮</button>

代码的运行结果如下所示：

在前端页面中的按钮的功能非常的强大，可以说按钮无处不在，例如我们注册时需要点击【注册】按钮，登录时需要点击【登录】按钮等等。按钮的主要功能就是帮助我们完成某种交互。

button元素中可以使用的伪类选择器

一个按钮可以使用的伪类选择器有:hover、:active、focus等，如下动图展示:hover和:active伪类选择器的效果：

其中，鼠标悬停时的状态为:hover，鼠标按下到松手的状态为:active。现在我们就来逐步学习一下这几个伪类选择器。

:hover伪类

:hover伪类的出发时机是用户悬停的某个元素上，我们可以通过:hover伪类来修改元素的显示与隐藏，字体或者背景颜色等内容，需要提一嘴的是，触摸屏不支持:hover伪类选择器。

现在我们就可以通过:hover来修改一下文字的颜色，示例代码如下所示：

button {
    /* 取消边框的样式 */
    border: none;
}

button:hover {
    background-color: #66B1FF;
}

代码的运行结果如下所示：

:active伪类

:active伪类代表的是用户按下按键和松开按键之间的时间，一般用于<a>元素和<button>元素，但是不限于这两个元素使用。

如下代码展示:active伪类的用法：

button {
    border: none;
}

button:active {
    background-color: #3A8EE6;
}

代码的运行结果如下所示：

:hocus伪类

:hocus伪类的触发时机为获取焦点后触发。如下代码展示:hocus伪类选择器的用法：

button {
    border: none;
}

button:focus {
    background-color: #3A8EE6;
}

代码的运行结果如下所示：

一个页面中只存在一个元素获取焦点。

:disabled伪类

:disabled伪类表示按钮处于禁用状态，:disabled伪类不仅仅只有按钮可以使用，像后面学习的<input>等也具有:disabled伪类。

如下代码展示:disabled伪类的用法

button {
    border: none;
}

button:disabled {
    background-color: #A0CFFF;
    /* 修改鼠标悬停时的状态 */
    cursor: no-drop;
}

代码的运行结果如下所示：

案例：一个朴素按钮

现在我们就要通过上面学习的内容来制作一个朴素按钮，示例代码如下：

button {
    border: none;
    color: #409eff;
    background: #ecf5ff;
    cursor: pointer;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 20px;
}

/* 值得注意的是 :hover和:active的顺序就是 hover 在前 active 在后 */
button:hover,
button:focus {
    background: #409EFF;
    border-color: #409EFF;
    color: #fff;
}

button:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
}

代码运行结构如下所示：

总结