In this tutorial I will teach you how to make an image rollover using CSS and Adobe Illustrator. It’s pretty straightforward and shouldn’t take you more than a couple of minutes. I’ve included the HTML, CSS, and image below the video.
If you like this tutorial please make it known by bookmarking it and commenting below.
index.html
<!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>Home Button</title>
<link type=”text/css” rel=”stylesheet” href=”style.css”>
</head>
<body>
<a class=”homebutton” href=”#”>Home</a>
</body>
</html>
style.css
@charset “UTF-8″;
/* CSS Document */
a.homebutton {
display:block;
width:120px;
height:40px;
text-indent:-5000px;
background:url(images/homebutton.jpg);
text-decoration:none;
}
a:hover.homebutton {
background-position: -120px 0;
}
Related Posts:
If you enjoyed this post, make sure you subscribe to my RSS feed!
January 11th, 2009 at 10:58 am
For some reason this simply won’t work for me…. Can you check your code?
Best,
Owen
January 11th, 2009 at 11:14 am
Oh, sorry about that duder. I figured things out… Dreamweaver is such a pain at times. One note: I think there should be a forward slash to end your ‘link’ tag.
Cheers,
Owen
P.S. I’ll be keeping an eye on your tutorials. You’re a great teacher.