Many of the emerging techniques in CSS3 are particularly well suited to interactive Web page elements such as buttons. In this tutorial we will explore using CSS3 properties including transforms, transitions, box shadows, backgrounds and rounded corners. We 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 we will be using, but users with non-supporting browsers will still be able to see and interact with the button.
This is how the button will look in its initial and hover states, with a moment during the transition captured in-between:
Create Your Page and Link
Let’s start by creating an HTML5 page as follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>In the body section, insert your anchor element inside a container element as follows:
<div id="container">
<a class="anim" href="index.html">
<img src="note.png" alt="link"/>
<span>Music</span>
</a>
</div>The anchor contains an image and some text in a span. We include a class name for the anchor, which we will use to identify it and its contained elements. The container element is really just there for the purposes of demonstration.
We will be using four images for the link button, so download them now, or use your own if you prefer. This image appears within the button and will be rotating on hover:
This is the main background image for the button:
These are alpha transparent gradient images we will display on top of the main background image:
Insert General CSS Properties
Before we get to work with animated properties, let’s get the basic CSS properties for the button sorted. In the style section of your page head, add the following to style the container element:
/*basic properties*/
#container {
padding:20px;
background:#FFCC00;
width:300px;
}The color and width have been chosen to suit the images we are using, but feel free to alter them. Next style the link with basic properties:
/*link*/
a.anim {
margin:auto;
display: block;
background:#FF0000;
width: 200px;
height:60px;
text-align:center;
text-decoration:none;
color:#000000;
font-weight:bold;
font-family:sans-serif;
font-size:large;
border:2px solid #FFFFFF;
}These properties are all pretty straightforward – the dimensions are again chosen to suit the background image we are working with so you will need to alter them if you are using a different image. Let’s add another couple of lines in this section before we move on. With CSS3 we can use rounded corners, so before the closing bracket for the “a.anim” section:
/*rounded corners*/
border-radius:15px;
-moz-border-radius:15px;The border radius specifies the extent to which the corners should be rounded. The vendor prefix version is for older versions of Firefox. After this section, position the image within the link as follows:
/*position img*/
a.anim img {
margin-top:5px;
}Now set the basic styling for the text inside the link:
/*link text*/
a.anim span {
display:block;
float:right;
padding-right:50px;
padding-top:20px;
}Now add a declaration for the anchor text on hover:
/*text on hover*/
a.anim:hover span {
color:#990000;
}The anchor element is followed by the class name then the pseudo-selector for the hover state, then the contained element we are targeting. Have a look at your page in a browser before continuing, so that you can see the incremental effect of the code we add next.
Style the Background
We are going to use multiple background images for our button, with the opaque images laid over the solid image. Add the following section to your CSS:
/*background and shadow*/
a.anim:link, a.anim:visited {
background:url(back_bottom.png) repeat-x 0px 0px,
url(back_top.png) repeat-x 0px 0px,
url(button_back.jpg);
}This section targets the anchor in default and visited state, not in hover state as we are going to provide different properties for that. When you use multiple backgrounds in CSS, the image that is listed first appears on top, and the image that appears last is displayed at the bottom. For this reason we include the opaque images before the main background image. As well as repeating the opaque images on the X axis, we are supplying position values for them, as we are going to move them on hover. Next add the hover declaration for the anchor:
/*background and shadow on hover*/
a.anim:hover {
background:url(back_bottom.png) repeat-x 0px 15px,
url(back_top.png) repeat-x 0px -15px,
url(button_back.jpg);
}Take a moment to look at the difference in these declarations. Everything is the same as the previous declaration apart from the position on the Y axis of the first two background images. This is because we are going to animate the images using a transition, moving them as the user moves their mouse on and off the image. At the moment the images will simply move instantly when you hover over the link button.
Add a Box Shadow
We will use a box shadow to add to the button effect. In the section in which you included the background declaration for the anchor in its non-hover state, add the following:
box-shadow: 2px 2px 2px #666666;This section should now have two declarations in it, one for the background and one for the box-shadow. The box shadow declaration takes the distance on the X and Y axes followed by the blur distance and shadow color. We are going to use a slightly different color for the shadow on hover, so add the following after the background declaration for your anchor element in its hover state:
box-shadow: 2px 2px 2px #999999;This section should also now have two declarations in it. The shadow is simply going to become a little lighter in color.
Rotate the Anchor Image
Since the anchor contains a smaller image, we will rotate this image on hover. Add the following to your CSS section:
/*image on hover*/
a.anim:hover img {
/*browser specific versions*/
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-o-transform: rotate(720deg);
/*general version*/
transform: rotate(720deg);
}The contained image will fully rotate twice when the user rolls their mouse over any part of the anchor element. We are using the rotate transform here, with vendor-specific versions preceding the generic version of the syntax. At the moment when you look at your page in the browser, nothing will happen to the image when you roll your mouse over. This is because the final position after rotation is the same as the initial position of the image. When we add a transition, you will see the effect.
Animate Using Transitions
Some of our hover effects are visible at the moment, but to animate the button we need transitions. When the user hovers, we are rotating the image, altering the text color and moving some of the background images. Let’s make all three of these changes elapse over the same period of time and with the same easing effect for consistency. Add a CSS section to target all of the elements that are undergoing these changes:
/*transitions for all*/
a.anim, a.anim img, a.anim span {
}We need all of these selectors – the anchor itself because its background property is changing, the image inside the anchor as it is going to rotate and the span of text inside the anchor as it is going to change in color. Rather than have some of these changes happen instantly on hover, we are going to apply the same transition to all of them, making them unfold over a set period of time. Inside this new CSS block, add the transition as follows:
/*browser specific versions*/
-moz-transition: 1s ease-out;
-ms-transition: 1s ease-out;
-webkit-transition: 1s ease-out;
-o-transition: 1s ease-out;
/*general version*/
transition: 1s ease-out;The vendor versions are followed by the general version of the transition syntax. The transition is going to unfold over a second and is going to ease out. This applies to the image rotation, the text color change and the background movement. Open your page in a browser to see the effect. As well as these changes animating when you roll the mouse on the link, the effect is reversed when you roll the mouse off it. Notice that the opaque background images slide up and down, moving slightly off the visible anchor button on hover, with a lightening effect – because the semi-transparent images are transparent at one end, the effect is of the images partially disappearing.
Conclusion
This is just an introduction to basic button animation using CSS3 – see the demo page for a functioning sample of the code we have used here. The key point to note is that the transition is what animates the hover effect. Any properties you supply specifically to the hover state of an anchor or its contained elements will elapse according to the specified transition. Of course there are still lots of people using browsers without support for some of these properties, but they will still be able to use your button.
