How to make Buttons with Hover Load Faster

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.

Topics: CSS, Design, Web Development