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?
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.
In order to make an entire element clickable you surround it with the A tag.
The onclick event occurs when the user clicks on an element.
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.
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)
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