Using Css For Button Image With Hover Effect

[ericpollard]

I have no idea what this is called. The title is as close as I could get to describe this. Here is a link though of what I am trying to copy: http://web-experiment.info/magento14/firesoul/ildsjaelenes-bog.html The Add Tags button is of interest to me. Here is what I am trying to accomplish: I would like to create a button, using the actual image from the Add To Tags button near the bottom of that link, to link mostly to PDF files. So it has a hover effect which involves the left half of the image scrolling up and then the right half of the image scrolling down... or something. I have looked at the CSS for that site through Firebug along with the HTML that calls on the CSS, but I still don't really get it. I've gotten pretty close, but what I have accomplished still shows the background of the stock button and the alignment of the text is off. I attached an image of what my accomplishment looks like. What code would remove the lingering button background and what code would align that text properly? My code so far looks like this:

.product-view .dataview .form-add button.button {    background: url("http://www.buygenieclips.com/skin/frontend/default/modern/images/black_btn_split.gif") no-repeat scroll right -50px transparent;    height: 19px !important;    padding: 0 10px 0 0;}.product-view .dataview .form-add .input-box input {    height: 13px;}.product-view .dataview .form-add button.button span span {    background: url("http://www.buygenieclips.com/skin/frontend/default/modern/images/black_btn_split.gif") no-repeat scroll left top transparent !important;    color: #4F4F4F;    font-size: 11px;    font-weight: normal !important;    height: 19px;    padding: 2px 0 0 11px;    text-transform: capitalize;}.product-view .dataview .form-add button.button:hover, .product-view .box-tags .form-add button.buttonHover {    background-position: right -75px;}.product-view .dataview .form-add button.button:hover span span, .product-view .box-tags .form-add button.buttonHover span span {    background-position: 0 -25px !important;    color: #111516;}

With my HTML calling on the code looking like this:

<table class="data" cellspacing="0" cellpadding="0"><tbody><tr class="odd"><td class="fill"><strong>UL Online Certifications Directory for the GenieClip</strong></td><td><div class="dataview"><a class="form-add" href="http://database.ul.com/cgi-bin/XYV/cgifind.new/LISEXT/1FRAME/srchres.html?query=(pliteq+%3CIN%3E+NAMELINE+or+pliteq+%3CIN%3E+" target="_blank"><button class="button" onclick="submitTagForm()" title="Add Tags" type="button"><span><span>View Data</span></span></button></a></td></tr></tbody></table>

I don't think I need the onclick="submitTagForm" thing. Well I know I don't. But I copied that code from the site and never changed it. Maybe someone could at least point me in the right direction for a guide on how to do this. I'd find it myself but I just don't know what it is called. I find guides for basic hover image buttons, but not this type that involves negative margins, etc.

[Ingolme]

When I hover over the add tags button, all I see is a change in background image. Which browser are you using? There's CSS image sprites, which do exactly what the "Add tags" button does.

[ericpollard]

NT

[ericpollard]

NT

[ericpollard]

NT

[ericpollard]

Ok, one last question. I was able to get this CSS image sprite to work on my computer, but once I implemented it on the site it word wrapped the two word text. Go here: http://www.buygenieclips.com/pliteq-genieclip.html and click on the Test Data tab to see what I mean. View and Data are put on individual lines. Any idea as to why?

[ericpollard]

Any idea on this one?

[Ingolme]

You're not supposed to have <div> elements inside a link it's not valid HTML. You have to turn the link itself into a block using the CSS display property.