Resource icon

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

No permission to download
PSD Supplied?
No
Changes made upon request?
No
GRAPHIC TYPE: Buttons
SOFTWARE USAGE: Any
PSD SUPPLIED: Yes
CHANGES MADE UPON REQUEST: Maybe. Probably not, as they're very easy to customise.
SCREENSHOT:



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:

Code:
.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:
http://rapidshare.com/files/256114685/Electrics_Rounded_Buttons_v1_2009.psd

121k .zip file containing 1x PSD.
Author
EthanJ
Downloads
1
Views
42
First release
Last update
Rating
0.00 star(s) 0 ratings
Top