Pressed button selector

Question

I d like to create a button that changes its style when it gets pressed  This is my CSS code    x000D   x000D  button   x000D      font-size  18px  x000D      border  2px solid gray  x000D      border-radius  100px  x000D      width  100px  x000D      height  100px  x000D    x000D   x000D  button active   x000D      font-size  18px  x000D      border  2px solid red  x000D      border-radius  100px  x000D      width  100px  x000D      height  100px  x000D    x000D   lt button gt Button lt  button gt  x000D   x000D   x000D    It is changed only when I click  amp  hold on it  I want to make it change style after it s pressed  For example  normal state would be white  state while being clicked would be green and after click is released it would be red

User · Accepted Answer

You can do this if you use an  lt a gt  tag instead of a button  I know it s not exactly what you asked for  but it might give you some other options if you cannot find a solution to this    Borrowing from a demo from another answer here I produced this     x000D   x000D  a   x000D    display  block  x000D    font-size  18px  x000D    border  2px solid gray  x000D    border-radius  100px  x000D    width  100px  x000D    height  100px  x000D    text-align  center  x000D    line-height  100px  x000D    x000D   x000D  a active   x000D    font-size  18px  x000D    border  2px solid green  x000D    border-radius  100px  x000D    width  100px  x000D    height  100px  x000D    x000D   x000D  a target   x000D    font-size  18px  x000D    border  2px solid red  x000D    border-radius  100px  x000D    width  100px  x000D    height  100px  x000D    x000D   lt a id  btn  href   btn  gt Demo lt  a gt  x000D   x000D   x000D    Notice the use of  target  this will be the style applied when the element is targeted via the hash  Which also means your HTML will need to be this   lt a id  btn  href   btn  gt Demo lt  a gt  a link targeting itself  and the demo http   jsfiddle net rlemon Awdq5 4   Thanks to  BenjaminGruenbaum here is a better demo  http   jsfiddle net agzVt     Also  as a footnote  this should really be done with JavaScript and applying   removing CSS classes from the element  It would be much less convoluted

User · Answer

Maybe  active over  focus with  hover will help  Try  button   background lime     button hover   background green     button focus   background gray     button active   background red       Then    lt button onkeydown  alerted of key pressed    id  button  title  Test button  href   button  gt Demo lt  button gt    Then    lt  --JAVASCRIPT-- gt   lt script gt  function alerted of key pressed     alert  You pressed a key when hovering over this button       lt  script gt     Sorry about that last one     I was just showing you a cool function   Wait    did I just emphasize a code block  This is cool

User · Answer

You can do this with php if the button opens a new page    For example if the button link to a page named pagename php as  url  www website com pagename php the button will stay red as long as you stay on that page   I exploded the url by     an got  something like   url 0    pagename php   lt    url   explode      substr   SERVER  REQUEST URI    strpos       SERVER  REQUEST URI     1 strlen   SERVER  REQUEST URI         gt     lt html gt   lt head gt     lt style gt       btn       background white              btn hover       btn-on       background red            lt  style gt   lt  head gt   lt body gt      lt a href   pagename php  class  btn  lt   if  url 0   pagename php    echo  btn-on      gt   gt Click Me lt  a gt   lt  body gt   lt  html gt    note  I didn t try this code  It might need adjustments

User · Answer

You could use  focus which will remain the style as long as the user doesn t click elsewhere   button active       border  2px solid green     button focus       border  2px solid red

User · Answer

Should we include a little JS  Because CSS was not basically created for this job  CSS was just a style sheet to add styles to the HTML  but its pseudo classes can do something that the basic CSS can t do  For example button active active is pseudo    Reference   http   css-tricks com pseudo-class-selectors  You can learn more about pseudo here   Your code   The code that you re having the basic but helpfull  And yes  active will only occur once the click event is triggered   button   font-size  18px  border  2px solid gray  border-radius  100px  width  100px  height  100px     button active   font-size  18px  border  2px solid red  border-radius  100px  width  100px  height  100px      This is what CSS would do  what rlemon suggested is good  but that would as he suggested would require a tag    How to use CSS   You can use  focus too    focus would work once the click is made and would stay untill you click somewhere else  this was the CSS  you were trying to use CSS  so use  focus to make the buttons change   What JS would do   The JavaScript s jQuery library is going to help us for this code  Here is the example       button   click function          this  css  border    1px solid red        This will make sure that the button stays red even if the click gets out  To change the focus type  to change the color of red to other  you can use this       button   click function          this  css  border    1px solid red         find any other button with a specific id  and change it back to white like      button red   css  border    1px solid white        This way  you will create a navigation menu  Which will automatically change the color of the tabs as you click on them      Hope you get the answer  Good luck  Cheers

[css] Pressed <button> selector

Examples related to css