Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

which css style handles the click event on a button? other than hover

Tags:

html

css

I see this site that has a button, when I hover over it the background changes.

When I click on the button, the button shading inverts i.e. reacts to the click event.

Which CSS style is this? I know :hover is for hover, but what about a click?

like image 286
Blankman Avatar asked Oct 15 '10 19:10

Blankman


People also ask

Is there a click event in CSS?

The most common way of creating a click event with CSS is using the checkbox hack. This method has broad browser support. You need to add a for attribute to the <label> element and an id attribute to the <input> element.

How do you make a button clickable in CSS?

In order to make an entire element clickable you surround it with the A tag.

Which of the following types of events to be used when a button clicks?

The onclick event occurs when the user clicks on an element.

How do you target a button in CSS?

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.


1 Answers

CSS3 does handle activation events now (2013).

The :active pseudo-class is working on any css selector like BUTTONs, not just A tags.

CSS3 STYLE

p { margin: 2em; }
button { background-color: White; color: SteelBlue; }
button:hover { background-color: LightSteelBlue; }
button:active { background-color: SteelBlue; color: White; }

HTML5

    <p>
        <button>test button with :active pseudo-class</button>
    </p>

Demo: http://jsfiddle.net/wp86u/

See: http://www.w3schools.com/css/css_pseudo_classes.asp (content changed since Diodeus answer)

like image 104
Kir Kanos Avatar answered Sep 27 '22 21:09

Kir Kanos