css button伪类

在CSS中，有一种伪类叫做button伪类。这个伪类用于样式化HTML中的按钮元素（<button>、<input type="button">、<input type="submit">），使其具有更加美观、互动性强的外观。

使用button伪类时，我们需要注意以下几点：

button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

button:active {
    background-color: #0048a3;
}

button:focus {
    outline: none;
    Box-shadow: 0 0 5px #ccc;
}

首先，我们需要定义button元素的基本样式。这个样式定义了按钮的padding、背景色、文字颜色、鼠标指针形状、边框等。由于我们使用了display: inline-block，所以按钮可以与文本在一行内显示。

接着，我们使用button:hover伪类定义鼠标悬浮在按钮上时的样式。这个样式只需要改变按钮的背景色即可，使其看起来更具有互动性。

然后，我们使用button:active伪类定义按钮被点击时的样式。这个样式也只需要改变背景色即可。

最后，我们使用button:focus伪类定义按钮被聚焦时的样式。这个样式需要去除按钮的轮廓线（outline），并添加一个Box-shadow效果，使得按钮看起来更加立体、突出。