Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Selector for pressed button

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?

like image 522
Uffo Avatar asked Jul 21 '10 15:07

Uffo


People also ask

How to add pressed effect on button when it is active?

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.

How to select all elements of a type 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']" ).

How to select elements using a button using pure CSS?

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.

What is the difference between element click selector and page click selector?

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.


1 Answers

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.

like image 126
Josh Stodola Avatar answered Sep 18 '22 00:09

Josh Stodola