70

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{ 
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
user7945230
  • 1,075
  • 2
  • 13
  • 20

5 Answers5

97

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>
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
  • 2
    :active is usually used of links (i.e. tags) – Rachel Gallen May 30 '17 at 13:52
  • 1
    Since some common libraries commonly and in my opinion poorly use `.button` for anchor links styled as buttons (I am looking at you bootstrap) and the OP has `.button` in the example perhaps expand this to include an anchor section with the `:active`? i.e. if they want a button they should use `` but that is not YOUR fault :) – Mark Schultheiss May 30 '17 at 14:55
  • @MarkSchultheiss I actually didn't notice that in the question, well pointed out , but indeed why not use a button tag if a button is desired ? I'll edit the answer to include a link with class button.... – Rachel Gallen May 30 '17 at 15:33
  • 5
    As per Mozilla documentation, one should use :active for button as well. https://developer.mozilla.org/en-US/docs/Web/CSS/:active – Niraj Dec 10 '20 at 15:30
  • 1
    One must use `active` instead of `focus`. Focus remains after button is depressed, active is only while mouse is down. – Qwerty Sep 18 '22 at 03:45
39

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.

Alexandros Panagiotakis
  • 870
  • 6
  • 13
26

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>
Nadir Laskar
  • 4,012
  • 2
  • 16
  • 33
8

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>
seanysean
  • 421
  • 3
  • 12
  • Why checkbox and radio types? not buttons in my mind. – Mark Schultheiss May 30 '17 at 14:59
  • @Mark Schultheiss You don't understand, if you ran the code snippets, maybe you would. The checkboxes are hidden, but you can take advantage of the :checked pseudo selector, which you must have the checkbox input to use. Like I mentioned in the post, this is a "hack". However, there are no other pure CSS/HTML alternatives. – seanysean May 30 '17 at 17:39
0

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;
}
priyank bhardwaj
  • 119
  • 2
  • 15