Universal Rounded Buttons (3 States) & CSS Sprites 2014-11-12

Rounded Buttons (3 States) & CSS Sprites

  1. EthanJ
    PSD Supplied?:
    Changes made upon request?:
    GRAPHIC TYPE: Buttons
    CHANGES MADE UPON REQUEST: Maybe. Probably not, as they're very easy to customise.


    The colours and styles contained within the PSD are more usage guidelines than final buttons and please edit and customise them to suit your needs.

    Sprite usage

    It's always best to do three state buttons using CSS sprites as it reduces the HTTP requests on a page from 3 too 1 and there's no lag on over or click.

    Below is an example of how you should layout your main sprite image (overlay yours in the same order and 'save as' is easiest):


    The three states in the sprite above are contained in one image (obviously) so what we will do is use the background-position CSS attribute to control which states are shown for the different up, hover and down states.

    So the CSS you would apply to the button in your markup is this:

    .myButton a {
    display: block;
    text-indent: -5000px;
    width: 136px;
    height: 41px;
    background-image: url(sprite.png);
    background-repeat: no-repeat;
    .myButton a {background-position: 0 0;}
    .myButton a:hover {background-position: 0 -39px;}
    .myButton a:active {background-position: 0 -83px;}
    Usage and Distribution

    Use, modify or redistribute however you like. But please leave the PSD in it's original state. If you do use it feel free to drop me a link at the address contained in the PSD :)

    Attached to post, but also a RS mirror:

    121k .zip file containing 1x PSD.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.