Download Button Sprite

A Download Button that I designed and implemented using a CSS Sprite that has a different default, hover, and active design for each state.

HTML

<body>
    <div class="center">
        <a href="#" alt="Download" class="button">Download</a>
    </div>
</body>

CSS

.button {
    display: block;
    width:120px;
    height:32px;
    /*button image from my flickr: http://www.flickr.com/photos/caartooner/ */
    background-image:
        url('http://farm7.static.flickr.com/6138/5926151727_3b5bd3813e_m.jpg');
    text-indent: -1999px;
}
.button:hover {
    background-position: 0px -32px;
}
.button:active {
    background-position: 0px -64px;
    position:relative;
    top:1px;
}
.center {
    width: 120px;
    margin: 120px auto 0 auto;
}