以下是一个简单的三态按钮示例,使用CSS样式创建了一个具有不同样式的按钮:
“`html
在这个示例中,按钮的样式在页面的顶部,包括一个深灰色的背景、一个黑色的标题和一个小的图标。在默认情况下,这个按钮是禁用的,因为它没有背景颜色和标题。
“`css
.button-link {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
.button-link:hover {
background-color: #333;
.button-link:active {
background-color: #fff;
color: #333;
在这个示例中,当用户鼠标悬停在按钮上时,按钮的状态会发生改变。在鼠标悬停在按钮上时,按钮的背景颜色会变成深灰色,标题和图标会变成白色。当用户点击按钮时,按钮的状态会再次发生改变,背景颜色和图标都会恢复原状。
使用CSS三态按钮样式可以帮助开发人员创建具有不同外观的按钮,从而满足用户的需求。这种样式可以很容易地应用于各种不同类型的按钮,并且可以很容易地定制为适应特定的需求。