LATEST BLOG

Pushing Your Buttons With CSS3

Jun 06, 2010 by Angelo Beltran | 5 Comments |

Discover how you can easily create fresh looking buttons with CSS3′s box shadow, text shadow, border radius and with the exciting RGBA properties. We also show you how to get that subtle shiny button effect using Adobe Photoshop.

TUTORIAL FILES

PREVIEW

Below is what we’re after under supported browsers.

On the other hand this is what we’re least impressed with under unsupported browsers.

The CSS3 Code


/* CSS3 /////////////////////////////////////////////////////// */
/* Inspired by the geniuses at ZURBs Playground /////////////// */
/* button ----------------------------------------------------- */
.fresh_button {
	background: #222 url(img/fresh-button.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	border-radius: .5em;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0,0.25);
	position: relative;
	cursor: pointer;
	}
	.fresh_button:hover {
		background-color: #111;
		color: #fff;
		text-decoration: none;
	}

/* sizes ------------------------------------------------------- */
.large { font-size: 1.4em; padding: 8px 14px 9px; }
.medium { font-size: 1.3em; }
.small { font-size: 1.1em; }

/* colours ----------------------------------------------------- */
.orange { background-color: #F36E21; }


<a class="large fresh_button" href="#">Fresh Button &#187;</a>
<a class="large orange fresh_button" href="#">
        Fresh Button &#187;</a>
<a class="medium orange fresh_button" href="#">
        Fresh Button &#187;</a>
<a class="small orange fresh_button" href="#">
        Fresh Button &#187;</a>

We use an em instead of px for our border radius for scalability.


-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;

The same reason we need to use RGBA to set our shadow colours instead of using a static hex code like #222222 which doesn’t scale well.


-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

If you omit the RGBA then you will get an undesired shadow effect in darker backgrounds similar to the screenshot below.

We could have used progid:DXImageTransform.Microsoft.gradient, -webkit-gradient and -moz-linear-gradient to achieve our button’s gradient effect but using a single PNG file as a background is easier and a lot more fun to implement.


background: #222 url(img/fresh-button.png) repeat-x;

How To Create The Button Gradient

STEP 1

Create a new web file in Photoshop and give it 200px width, 30px height and a transparent background. Rename the first layer to bg and create a second layer called shine.

STEP 2

Fill the bg layer with a solid colour like #222.

STEP 3

Press G to access your Gradient Tool. Change your foreground to #FFF and select Foreground to Transparent as your gradient preset. Create a gradient starting at the top of the button while holding down SHIFT. You can adjust the opacity to get the desired effect.

STEP 4

Press C to access your Crop Tool. Change the crop width to 1px and crop height to 30px. Now make your crop selection. Disable the visibility of the bg layer and now you’re ready to save the file as a PNG.

You can set your height to any pixel value greater than 30px when creating your own gradient background back in STEP 1. You can adjust the gradient background’s vertical position via CSS to accommodate the gradient’s varying intensity.


background: #222 url(img/fresh-button.png) repeat-x 0 -10px;

That’s it you’re finished.

Many thanks goes to ahisgett for supplying the main photo for this post.

Written by Angelo Beltran

Angelo Beltran is a freelance designer who recognizes that design and marketing are one and the same. He's passionate about branding and corporate identity. Follow his tweets over at Twitter.

5 Comments

SeanJA said...

Jun 11, 2010

That is all fine and dandy, but using vendor extensions != CSS3…

0 0
Montana Flynn said...

Jun 29, 2010

Amazing tutorial, thanks a lot for sharing it!

0 0
Angelo Beltran said...

Jun 30, 2010

@MontanaFlynn Thank You it’s comments like yours that makes it worthwhile. Cheers!

0 0