CSS3 buttons, adding a simple level of interaction

Posted by on May 28, 2010 in css | No Comments

CSS3 and HTML5 (note the lack of space between the L and the 5 – see Jeremy Keith for more info) are set to make a big impact in the next few years. Already, the developments around video alone, have made HTML5 a hotly-debated technology.

As noted previously, one of the exciting things about working in a technology-related industry such as web design, is the continual technological progress that keeps the dedicated designer or developer on their toes. Learning something new is always fun, but learning something new that makes your life easier is liberating.

CSS3 certainly falls into this second category. The prospect of ridding the world of tiny rounded-corner masks, pointless div‘s and slivers of gradient-filled images for tiling, leaves me feeling happier, cleaner and smoother-of-face (no worry-lines). This of course assumes you’ve schooled your clients successfully in the benefits of graceful degradation of features; older versions of Internet Explorer of course don’t support the new developments.

So I thought I’d share a button I created on a recent project. There are lots of CSS3 button tutorials around the place, so I’m not going to bore you with excessive detail. My humble addition simply adds a subtle interaction to the button via the :active and :focus pseudo-classes.

So to turn a simple link into a half-decent buttony-button:

a.button {
    padding: 3px 6px;
    border: 3px solid #df4e4e;
    background-color: #a91c1c;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align:center;
    font-size:0.8em;

    /* the exciting CSS3 stuff - the rounded corners */
    -moz-border-radius:4px;/* FF1+ */
    -webkit-border-radius:4px; /* Saf3+, Chrome */
    border-radius:4px; /* Opera 10.5, IE 9.0 */

    /* the exciting CSS3 stuff - the shadows */
    -moz-box-shadow: 1px 1px 2px #333; /* FF3.5+ */
    -webkit-box-shadow:1px 1px 2px #333; /* Saf3.0+, Chrome */
    box-shadow: 1px 1px 2px #333; /* Opera 10.5, IE 9.0 */
    }

And then the pseudo-classes to provide the affordance of a button (i.e. make the button move slightly as a button would when pressed in real life):


a.button:active,
a.button:focus {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    position:relative;
    top:1px;
    left:1px;
    }

Easy!

click me! click me! click me!

And until I commit all the new CSS to memory, CSS3please makes it easy.

Leave a Reply