Home/ Questions/Q 6918023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:48:21+00:00

I’ve made a button that expands horizontally: http://jsfiddle.net/timkl/TsDud/ However I’m having a hard time

  • 0

I’ve made a button that expands horizontally: http://jsfiddle.net/timkl/TsDud/

However I’m having a hard time getting my button’s hover-state to work properly.

This is my markup:

<a class="action-button" href="#"><span>Some text</span></a>

I don’t know how to style the hover-effect so that the entire button is “lit” when the user hovers over a part of the button that isn’t covered by the <span>.

This is what I get when I hover over a part of the button that isn’t covered by the <span>:

enter image description here

Check out my example here: http://jsfiddle.net/timkl/TsDud/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jsFiddle DEMO HERE

    Change the last lines to:

    a.action-button:hover > span

    Ex:

    a.action-button:hover > span{
    background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left-hover.png) no-repeat;
    color: white;
}

    And as I said in the comment above try to avoid to use separate images for your button states.

    Use only one image and for ex. on hover just ‘change’ the background-position to the part of image representing the state you want!
    It will save you the “button disappearance” until the new image is loaded.

    • 0