How to style a clicked button in CSS [duplicate] - html

Question

This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
I looked at W3 schools website W3Schools which explained styling buttons with CSS. I need to specify a button style when it is clicked. What is the pseudo-class selector for this? e.g. the hover button is:
.button:hover{
}

Answer 1

This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a> tags))
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>
Hello<br><br>
<a class="button" href="#">Bye</a>

Answer 2

If you just want the button to have different styling while the mouse is pressed you can use the :active pseudo class.
.button:active {
}
If on the other hand you want the style to stay after clicking you will have to use javascript.

Answer 3

There are three states of button
Normal : You can select like this button
Hover : You can select like this button:hover
Pressed/Clicked : You can select like this button:active
Normal:
.button
{
//your css
}
Active
.button:active
{
//your css
}
Hover
.button:hover
{
//your css
}
SNIPPET:
Use :active to style the active state of button.
button:active{
background-color:red;
}
<button>Click Me</button>

Answer 4

Unfortunately, there is no :click pseudo selector. If you want to change styling on click, you should use Jquery/Javascript. It certainly is better than the "hack" for pure HTML / CSS. But if you insist...
input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
background: #444;
color: #fff;
}
<label for="input">
<input id="input" type="radio" />
<span>NO JS styling</span>
</label>
Or, if you prefer, you can toggle the styling:
input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
background: #444;
color: #fff;
}
<label for="input">
<input id="input" type="checkbox" />
<span>NO JS styling</span>
</label>

Answer 5

button:hover is just when you move the cursor over the button.
Try button:active instead...will work for other elements as well
button:active{
color: red;
}