Make Buttons with Hover Load Faster

May 8, 2008 · Print This Article

With CSS we can target the ‘:hover’ child class for links and update their background properties.

Example

.nav a:link, .nav a:visited {
width: 160px ; height: 30px ; display: block; overflow:hidden;
background: url(’images/nav1.gif’) 0px 0px no-repeat;
}
.nav a:hover, .nav a:active{
background-position: 0px -30px;
}

The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.


Your choice for site templates and wordpress themes

Comments

Got something to say?

You must be logged in to post a comment.