Pre-loaded Hover-state Images
In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded. The advantage to this technique is that upon hovering over your button, the user won’t have to wait for it’s hover state image to appear; there’ll be no ‘graphic-less’ moment while the image loads, all without a single line of JavaScript.
Open up a blank XHTML document with a style statement within the <head> tags. This is where we’ll place out CSS code.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>button</title>
<style></style>
</head>
<body>
</body>
</html>
We’ll begin by setting out the XHTML markup for our button, between the <body> tags:
Notice the button has been given the class of ‘button’.
Now we’ll set up some basic CSS to establish some styles in our document. Place the following between the <style> tags:
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333
}
Now some attributes for what will be our button, identifiable by it’s class ‘button’. Firstly, it has a width of 100px, a height of 20px and some extra padding to increase it’s dimensions further.
display: block;
width: 100px;
height: 20px;
padding: 15px 20px 10px 45px;
color:#666666;
text-decoration: none;
}
The above statement dictates that the button has padding of 15px at the top, 20px on the right, 10px at the bottom and 45px on the left. This extra padding on the left will make room for an icon on our button. The total dimensions of our button are now 160px wide and 45px high. You’ll also see that I’ve given any text within the button a color of #666666, that it’s displayed as ‘block’ (making it adhere to the dimensions we’ve set) and that I’ve removed the default underline by stating that there will be no text decoration. Now lets make a graphic for it with Photoshop.
Open up a new document in Photoshop with the dimensions of our button.
Copy a design something along the lines of what you see below. I’ve chosen to use one of the many icons freely available from famfamfam.com and placed it on the left.
Now alter your canvas size (Image > Canvas Size…). Double it’s height to 90px from the top edge. This will give you the following result:
Now duplicate all the elements you’ve drawn and position them at the bottom of your canvas. This copy will be your button’s hover-state.
Your two button images need to be different in some way – perhaps a completely different color, different icon or perhaps something more subtle. I’ve chosen to alter the transparency of my top image making it fainter than the hover-state. The button will appear darker when hovered over.
When you’re satisfied with your image, save (File > Save for Web & Devices…) in whatever format you choose.
Now let’s use this image as a background for our button by further defining our ‘button’ class in the CSS.
This states that the image we’ve chosen will be used as the background for our button, that the image won’t be repeated (it won’t be tiled), that it will be positioned 0px from the left and 0px from the top. Of course, when the page is loaded and the button background is also loaded, the whole thing is placed in your browser’s cache, even the part of your button image which isn’t yet visible. Check your button in a web browser, it should look like this:
Now we need to add the final CSS statement, defining what happens when our button is hovered over.
color:#333333;
background:url(button.jpg) no-repeat 0px -45px;
}
This simple statement dictates that the hover-state of our ‘button’ link will have a slightly darker color of #333333 and that the background image will be our button.jpg. The difference this time is that the background position has been set at 0px from the left and -45px from the top – or, said in another way, that the background image is raised 45px. Our hover-state graphic will therefore instantly fill the button when hovered over. Try it yourself! Finished CSS Example
Tagged: Button, CSS Buttons, CSS Tutorials, Rollover Button
