How to style a clicked button in CSS [duplicate]

Question

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>    <a href="#">Hello</a><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.