CSS change button style after click

Question

I was wondering if there was a way to change a button's style, in css, after it's been clicked, so not a element:active.

Answer 1

If you're looking for a pure css option, try using the :focus pseudo class.

#style  {     background-color: red; }  #style:focus {          background-color:yellow;     } 

Answer 2

Each link has five different states: link, hover, active, focus and visited.

Link is the normal appearance, hover is when you mouse over, active is the state when it's clicked, focus follows active and visited is the state you end up when you unfocus the recently clicked link.

I'm guessing you want to achieve a different style on either focus or visited, then you can add the following CSS:

a { color: #00c; } a:visited { #ccc; } a:focus { #cc0; } 

A recommended order in your CSS to not cause any trouble is the following:

a a:visited { ... } a:focus { ... } a:hover { ... } a:active { ... } 

You can use your web browser's developer tools to force the states of the element like this (Chrome->Developer Tools/Inspect Element->Style->Filter :hov): Force state in Chrome Developer Tools