如何样式单击按钮在CSS[复制]

Question

我查看了W3学校网站W3学校，该网站解释了CSS按钮的样式。我需要在单击时指定按钮样式。这个的伪类选择器是什么？e、 g.悬停按钮为：

.button:hover{ 
}

Answer 1

按钮有三种状态

• 正常：您可以像这样选择按钮
• 悬停：您可以这样选择按钮：悬停
• 按下/单击：您可以像这样选择按钮：active

正常：

.button
 {
     //your css
 }

忙碌的

 .button:active
{
        //your css
}

悬停

 .button:hover
{
        //your css
}

片段：

使用：active设置按钮的活动状态的样式。

button:active{
   background-color:red;
}

html lang-html prettyprint-override"><button>Click Me</button>

Answer 2

如果您只是希望按钮在按下鼠标时具有不同的样式，您可以使用： active伪类。

.button:active {
}

另一方面，如果您希望样式在单击后保持不变，则必须使用javascript。

Answer 3

此按钮最初将显示为黄色。悬停时它将变成橙色。单击它时，它将变为红色。我使用：hover和：focus来调整样式。（活动选择器通常用于链接（即

button{
  background-color:yellow;
}

button:hover{background-color:orange;}

button:focus{background-color:red;}

a {
  color: orange;
}

a.button{
  color:green;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:active {
  color: blue;
}

<button>
Hover and Click!
</button>
<br><br>

<a href="#">Hello</a><br><br>
<a class="button" href="#">Bye</a>