[html] How to style a clicked button in CSS

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

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{_x000D_
   background-color:red;_x000D_
}

<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 {_x000D_
display: none;_x000D_
}_x000D_
span {_x000D_
padding: 20px;_x000D_
font-family: sans-serif;_x000D_
}_x000D_
input:checked + span {_x000D_
  background: #444;_x000D_
  color: #fff;_x000D_
}

  <label for="input">_x000D_
  <input id="input" type="radio" />_x000D_
  <span>NO JS styling</span>_x000D_
  </label>

Or, if you prefer, you can toggle the styling:

input {_x000D_
display: none;_x000D_
}_x000D_
span {_x000D_
padding: 20px;_x000D_
font-family: sans-serif;_x000D_
}_x000D_
input:checked + span {_x000D_
  background: #444;_x000D_
  color: #fff;_x000D_
}

  <label for="input">_x000D_
  <input id="input" type="checkbox" />_x000D_
  <span>NO JS styling</span>_x000D_
  </label>

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{_x000D_
  color: red;_x000D_
}