Rollover Transition using a Button_Slice

HTML & CSS
1

Hi there. I’m pretty new to CSS and am trying to design site. I’ve run into an issue that I cannot solve and was wondering if someone could offer any ideas.
I’m creating a button on the site and want a mouse rollover effect. The button is basically this:

a.button {
    color: #393838;
    margin-left: 30px;
    padding: 13px 25px;
    text-decoration: none;
    background: url(images/button_slice.gif) repeat-x;
}

Now, I have a different button_slice for the mouseover. Using the following code I almost get what I need, except that the 1st slice also appears, appended on the end of the mouseover effect:

a.button :hover{
    margin-left: -25px;
    padding: 13px 25px 13px 25px;
    background: url(images/button_slice1.gif) repeat-x;
}

I know that it would be easier to simply use 2 different solid images, or image sprites, but I want to get this slice technique to work. Any ideas how to correct this?
Btw, the html is as follows:

       <div id="call">
		  <a href="link" class="button"><b>Button Text</b></a>
		</div>

Thanks.

2

Hi, welcome to Sitepoint :slight_smile:

If the button is a fixed width and height then size the button to fit the normal the normal state of the image and then on rollover just move the background-position of the image itself to reveal the new part of the image ( .etc:hover {background-position:0 100%}).

However if you are trying this with repeating images in a fluid width button then it would be best to use two images otherwise you would need to space the images on the sprite far enough away so that you can repeat them without the other image showing.

I’d really need to see a picture of what you have got to be more specific (or preferably a link).

3

Thanks Paul. I seem to have solved it with the following:

a.button {
    font-size: 22px;
    color: #ffffff;
    margin-left: 25px;
    padding: 13px 0px;
    text-decoration: none;
    background: url(images/button_slice.gif) repeat-x;
}
a.button :hover {
    font-size: 22px;
    color: #F0F0F0;
    padding: 13px 0px;
    background: url(images/button_slice1.gif) repeat-x;
}

And:

           <div id="call">
		  <a href="example.com" class="button"><b>&nbspBUTTON TEXT&nbsp</b></a>
	   </div>

I don’t have a link yet as the site is still in development and not yet live. Will link it when completed.
Thanks