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  Thanks

User · Answer

An easy way of doing this is to use JavaScript like so  element addEventListener  click    e   gt        e preventDefault         element style     lt insert CSS here as you would in a style attribute gt

User · Answer

If you re looking for a pure css option  try using the  focus pseudo class     style        background-color  red      style focus            background-color yellow

User · Answer

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

User · Answer

What is the code of your button  If it s an a tag  then you could do this    x000D   x000D  a   x000D    padding  5px  x000D    background  green  x000D    x000D  a visited   x000D    background  red  x000D    x000D   lt a href     gt A button lt  a gt  x000D   x000D   x000D    Or you could use jQuery to add a class on click  as below    x000D   x000D      button   click function     x000D        button   addClass  button-clicked    x000D      x000D   button-clicked   x000D    background  red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button id  button  gt Button lt  button gt  x000D   x000D   x000D

User · Answer

It is possible to do with CSS only by selecting active and focus pseudo element of the button    button active      background olive     button focus      background olive      See codepen  http   codepen io fennefoss pen Bpqdqx  You could also write a simple jQuery click function which changes the background color   HTML    lt button class  js-click  gt Click me  lt  button gt    CSS   button     background  none      JavaScript          js-click    click function              js-click    css  background    green            Check out this codepen  http   codepen io fennefoss pen pRxrVG

User · Answer

If your button would be an  lt a gt  element  you could use the  visited selector   You are limited however  you can only change      color   background-color   border-color  and its sub-properties    outline-color   The color parts of the fill and stroke properties   I haven t read this article about revisiting the  visited but maybe some smarter people have found more ways to hack it

User · Answer

Try to check outline on button s focus   button focus       outline  blue auto 5px       If you have it  just set it to none

[css] CSS change button style after click

Examples related to css

Examples related to button

Examples related to styling