CSS3 buttons have been considered a hot topic since they were first introduced on cutting-edge browsers' nightly builds. Buttons are important, well-recognized elements of the majority of user interfaces. What makes them a hot topic for web developers is that CSS3 buttons are easy to modify by simply changing the text or the stylesheet declarations.
In this chapter, we'll create buttons that mimic their real-world counterparts using only CSS3. While doing so, we'll explore new CSS properties and tricks to achieve our goals. We will cover the following topics:
A coin-operated push button
The
:before
and:after
pseudo-selectorsGradients
Avoiding experimental prefixes
Shadows
Adding labels
Handling mouse clicks
Small change in CSS, big results
An ON/OFF switch
The active state
The checked state
Adding colors
Supporting older browsers
A final note on CSS gradient syntax