Question

Is it possible to do something like this except as a sprite, only using css/html?

Excuse the poor example. I am just trying to figure this out.

Example

Answer 1

Yes, you just put the two images together into one, and use the background-position style to change what part of the image is shown.

I applied it to your example, but I just use the top and bottom half of one of the images:

http://jsfiddle.net/Guffa/Lx4tp/2/

HTML:

<a class="link">Buy Now<a/>

CSS:

.link {
   width:100px;
   height:12px;
   background: #fff url('http://server2.iconfinder.com/data/icons/prettyoffice/24/add1-.png') no-repeat right 0;
   display:block;
}

.link:hover {
    background-color: #f4f4f4;
    background-position: right -12px;
}