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

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

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   x000D  button active  x000D     background-color red  x000D    x000D   lt button gt Click Me lt  button gt  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

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

[html] How to style a clicked button in CSS

Examples related to html

Examples related to css