Grow your CSS skills. Land your dream job.

Button methods?

  • # December 25, 2009 at 10:33 pm

    So I was watching the video tutorial which describes a three state button and I was wondering if this is a best practice?

    Are there other good methods with CSS that are good for button skinning?

    # December 26, 2009 at 2:18 am

    i think it depends on your coding style and the site you are building. You were probably watching a video on css sprites. They are good because it lowers that amount of images you have to load. Everyone has their own style though

    # December 30, 2009 at 7:51 am

    If the button is merely a link you can do something like this. Lets say your button is 200px wide by 30px tall.

    If you want 3 states (normal, hover/focused, visited/active) then your sprite image will need all of those states in the same image (vertically stacked). It’s just a case of moving the sprite image (background) dependant upon what state the button it.

    Code:
    /* CSS */
    a.button { width: 200px; height: 30px; /* but in your own dimensions */ display: block; background: url(“img/button_sprite.gif”) no-repeat 0 0; }
    a.button:hover,
    a.button:focus { background-position: 0 -30px; /* no need to declare your background again, just change the y-pos */ }
    a.button:visited,
    a.button:active { background-positionl: 0 -60px; /* change the y-pos again */ }

    .hide { position: absolute; left: -999em; /* this may come in handy */ }


    Button Text Will be Hidden, but it’s useful incase CSS isn’t applied

    Hope that helps.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".