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{ }
5

5 Answers

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 href="#">Bye</a>
4

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.

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>

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 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 type="checkbox" /> <span>NO JS styling</span> </label>
2

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; }