Is there any option, or special selector to change the style for a pressed button, what I mean by that..when a user clicks a button I want to change the style for that button? Is there any option to do that like: :focus
or only with javascript click/focus event?
We can use CSS transform property to add a pressed effect on the button when it is active. CSS transform property allows us to scale, rotate, move and skew an element. For this method, we can play with the translate function in CSS. We’ll use translateY (length) function on active state of button.
button selector. Description: Selects all button elements and elements of type button. An equivalent selector to $( ":button" ) using valid CSS is $( "button, input[type='button']" ).
To achieve the best performance when using :button to select elements, first select the elements using a pure CSS selector, then use .filter (":button") . Find all button inputs and mark them.
The only difference is that Element click selector can interact with the web page by clicking on buttons to load new elements. For example a page might use JavaScript and AJAX for pagination or item loading.
I think you are looking for the :active
pseudo-class...
#btn { border: solid 5px red; padding: 5px; }
#btn:hover { border-color: green; }
#btn:active { border-color: blue; }
<button id="btn" />
Note: if you are using both :hover
and :active
on a single element, the :hover
definition must come first.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With