css按钮状态组合 |html和css做网页案例

/* 正常状态 */
button {
background-color: #2196f3;
color: #ffffff;
border-radius: 8px;
padding: 10px 20px;
border: none;
}
/* 鼠标悬停状态 */
button:hover {
background-color: #0f69c3;
}
/* 按钮点击状态 */
button:active {
transform: translateY(2px);
}
/* 禁用状态 */
button:disabled {
opacity: 0.6;
}

在上述代码中，大家定义了四种状态的CSS样式：正常状态、鼠标悬停状态、按钮点击状态和禁用状态。

正常状态和禁用状态的样式很好理解，按钮的背景、字体颜色、边框和内边距等属性都被定义了。

当鼠标悬停在按钮上时，大家使用:hover伪类来应用悬停状态的样式。在此状态下，按钮的背景颜色会变得更深。

当按钮被按下时，大家使用:active伪类来改变按钮的状态。大家使用CSS transform（translateY）属性来创建一个简单的“按钮按下动画”效果。

最后，在禁用状态下，按钮的透明度被设置了60%，这意味着它变得更加不可用。

通过使用这些CSS状态组合，大家可以创造出一些非常吸引人的按钮样式，更好地监控用户交互，并为不同的按钮状态添加反馈和氛围。