The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Text on sprite button disappears on rollover

  • # October 7, 2008 at 6:38 pm

    I am using a sprite to create a rollover button that I can display text on. It works just fine when the page loads.When I mouse over the button, it changes the background position just like it should but the text disappears.

    Here is my css:

    A.button, A.button:LINK, A.button:VISITED, A.button:ACTIVE, {
    float: left;
    display: block;
    background: transparent url(images/button.gif) no-repeat 0px 0px;
    overflow: hidden;
    height: 25px;
    width: 127px;
    margin-right: 8px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    A.button:HOVER {
    background-position: 0px -25px;

    and I am calling it like this:


    I could create an image with the text embedded in the image but I want a generic button that I can reuse.

    What am I missing here?

    # October 8, 2008 at 1:56 pm

    I’m such a dork!

    By default I have:

    A { color: 000000; }
    A:hover { color: ffffff; }

    Of course my black text on a white button was ‘disappearing’ on rollover.
    Geez, what a noob! :oops:

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed