Animating Buttons with CSS3

Many of the emerging techniques in CSS3 are particularly well suited to interactive Web page elements such as buttons. In this tutorial Sue Smith will explore using CSS3 properties including transforms, transitions, box shadows, backgrounds and rounded corners. She will be working with an anchor element, animating the button when it is in hover state. Most modern browsers support the bulk of the properties she will be using, but users with non-supporting browsers will still be able to see and interact with the button.

Let’s start by creating an HTML5 page. In the body section, insert your anchor element inside a container element. The anchor contains an image and some text in a span. Sue Smith includes a class name for the anchor, which she will use to identify it and its contained elements. The container element is really just there for the purposes of demonstration. Before she gets to work with animated properties, she does the basic CSS properties for the button sorted. In the style section of her page head, she adds the following to style the container element.