Friday, September 2, 2011

CSS: Simple button hover with image sprite

Step 1: Create a 2-in-1 image, "cancel.jpg" (mouseOut & mouseOver button)



Step 2: Add this code to CSS
.btn {
 background: url('cancel.jpg') no-repeat; 
 background-position: 0 0;
 width:124px; 
 height:40px; 
}
.btn:hover {
 background-position:0 -40px;
}

Step 3: Code in HTML

<a href="index.html" class="btn" title="Cancel"></a>

No comments:

Post a Comment