Based on this guide

http://www.table2css.com/articles/how-create-rollover-image-button-html-and-css-without-any-javascript

Create your image double height with the roll over image in the bottom half

In the <head>

<style type="text/css">
a.myrollover {
  display: block;
  width: 80px;
  height: 30px;
  background-image: url('button_combined.png');
}

a.myrollover:hover {
  background-position: center bottom;
}
</style>

Then for your link

<a href="#" class="myrollover"></a>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published.