How to style a clicked button in CSS

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

User · Answer

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.

_x000D_

button:active{_x000D_
   background-color:red;_x000D_
}

_x000D_

<button>Click Me</button>

_x000D_

User · Answer

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   lt a gt  tags      x000D   x000D  button  x000D    background-color yellow  x000D    x000D   x000D  button hover background-color orange   x000D   x000D  button focus background-color red   x000D   x000D  a   x000D    color  orange  x000D    x000D   x000D  a button  x000D    color green  x000D    text-decoration  none  x000D    x000D   x000D  a visited   x000D    color  purple  x000D    x000D   x000D  a active   x000D    color  blue  x000D    x000D   lt button gt  x000D  Hover and Click  x000D   lt  button gt  x000D   lt br gt  lt br gt  x000D   x000D   lt a href     gt Hello lt  a gt  lt br gt  lt br gt  x000D   lt a class  button  href     gt Bye lt  a gt  x000D   x000D   x000D

User · Answer

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

User · Answer

button hover is just when you move the cursor over the button  Try button active instead   will work for other elements as well   x000D   x000D  button active  x000D    color  red  x000D    x000D   x000D   x000D

User · Answer

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      x000D   x000D  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    x000D     lt label for  input  gt  x000D     lt input id  input  type  radio    gt  x000D     lt span gt NO JS styling lt  span gt  x000D     lt  label gt  x000D   x000D   x000D    Or  if you prefer  you can toggle the styling   x000D   x000D  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    x000D     lt label for  input  gt  x000D     lt input id  input  type  checkbox    gt  x000D     lt span gt NO JS styling lt  span gt  x000D     lt  label gt  x000D   x000D   x000D

[html] How to style a clicked button in CSS

Examples related to html

Examples related to css