CSS Rollover Buttons
This is a tutorial on creating rollover buttons using CSS/HTML
The program I used for my coding was PSPad
Just incase you can’t understand me, or see what I’m typing, here is a copy of the code:
Images Used:
styles.css:
body { background-color: #708c83;}
/* NAVIGATION */
#navigation {
width:255px;
margin: 0 auto;
}
ul#navigation {
list-style: none;
}
ul#navigation li {
display: inline;
}
ul#navigation li a {
text-indent:-9999px;
display: block;
height: 42px;
float: left;
}
ul#navigation li a.home {
width: 86px;
background: url(“images/btn_home.png”) no-repeat scroll center bottom;
}
ul#navigation li a.about {
width: 84px;
background: url(“images/btn_about.png”) no-repeat scroll center bottom;
}
ul#navigation li a.contact {
width: 85px;
background: url(“images/btn_contact.png”) no-repeat scroll center bottom;
}
ul#navigation li a.home:hover, ul#navigation li a.about:hover, ul#navigation li a.contact:hover {
background-position: top center;
}
index.html
<body>
<ul id=”navigation”>
<li><a class=”home” href=”#” title=”Home”></a></li>
<li><a class=”about” href=”#” title=”About”></a></li>
<li><a class=”contact” href=”#” title=”Contact”></a></li>
<ul>
</body>
Comments are closed.