Create a Sleek CSS3 Button Under a Minute

Posted by JP on December 2nd, 2010 in Coding | 11 Comments

As a web developer we often find ourselves creating buttons for submit buttons, links and more. Doing this the old fashioned way can take a lot of time as you need to open photoshop and create that gradient background, shadow effects etc.
In this tutorial I'm going to show you how to create a very sleek web 2.0 CSS3 button in under a minute.

You can take a look at the end result here or you can download it here

Getting Started

We're going to start by creating the button in basic CSS.

border: 1px solid #5d9046;
background: #67AA25;
color: #fff;
text-transform: uppercase;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
width: 156px;
font-size: 14px; 
font-weight: bold;
padding: 8px 0;
text-align: center; 
display: block;

This is going to give us a very simple square button as illustrated below:

Pretty boring huh? Let's style it up a little bit :D

Creating Rounded Corners

Now that we've created the basic button, we can create rounded corners easily thanks to CSS3.
Simply add the following code into your button class to create the rounded corners.

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

Now our button looks like this:

Adding Shadows

Thanks to CSS3 you can easily add shadows to your boxes or text. I've pasted some code below to give your button even more style:


	text-shadow: 1px 1px 1px #666;
	-moz-box-shadow: 0 1px 3px #111;
	-webkit-box-shadow: 0 1px 3px #111;
	box-shadow: 0 1px 3px #111;

This code adds shadow to our text, and to our buttons. Neat huh?

Creating a Gradient Background for our Button

Thanks to an awesome application created recently by the creators of ColorZilla, we can now easily create gradients using css3 without having to use images.
Link: Gradient Editor

Using the gradient editor, I've created my background and the editor compiled the following code for me to use:


	background: #3F8EB5; /* old browsers */
	background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */

It falls back wonderfully so you don't have to worry about older browsers not seeing your button etc.
Below you can see the end result of our button:

Now you can go ahead and add :hover and :active pseudo-classes to bring the button even more to life.

I hope you guys enjoyed this tutorial!
Feel free to leave comments below :D

Tags: button, css, css3, tutorials

11 Comments

1 Rob W says:
Dec 05, 2010 at 6:32 pm
Do you have a completed example? The hover and active states are the tricky part, of course — it looks nice to switch the shadows and/or gradient, and possibly placement… but you still need to degrade nicely in IE6 (and most of us still have to support that…).

I’d love to move to CSS for my buttons, but I still haven’t found an example out there that really works well across browsers.
2 Name (required) says:
Dec 06, 2010 at 11:33 am
Can you access this button programmatically? By that I mean do you give it a name like all buttons and in ASP.NET reference it? Can it be tired to a click event?

Thanks for showing how easy it is to make it.
3 JP says:
Dec 09, 2010 at 11:08 pm
hey guys thanks for the comments.
You can take a look at the final product at the beginning of the article.

Also, you can give it names etc; you just have to edit your submit button with the css code provided above :)
4 Will says:
May 18, 2011 at 6:28 pm
I didn’t realize you could specify rounded corners. I always thought it had to be a graphic.
5 bba says:
Aug 19, 2011 at 10:22 pm
nice one
really helpful
God bless
6 Watt says:
Feb 02, 2012 at 5:35 pm
CSS3 : thank you !
Very practical and very quick…

Thx
7 skirting boards says:
Jan 28, 2013 at 1:11 am
For sure, this was a very good posting, thanks for discussing with me.
I have numerous family and friends which will be intrigued, most definitely
I’ll send it along directly to them.
8 Read More says:
Mar 02, 2013 at 8:06 pm
I’m really impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you modify it yourself? Either way keep up the excellent quality writing, it is rare to see a great blog like this one nowadays.

My website: Read More
9 yamaha filano new says:
Apr 21, 2013 at 5:00 am
That is a very good tip especially to those new to the blogosphere.
Brief but very accurate information… Many thanks for sharing
this one. A must read post!
10 Minna says:
Apr 29, 2013 at 3:18 pm
Howdy Now i’m so excited I stubled onto your blog -, I seriously found you by mistake, while I was researching on Bing for something more important entirely, Anyways We are here now and is likely to like to say kudos for one marvelous post or a all over thrilling blog (In addition, i love the theme/design), I would not have the time to check out just about everything inside the moment however have bookmarked it in addition to included your Nourishes, if I’vе got time ӏ’m backup in read additional, Remember to preserve the excellent work.
11 Fiona says:
May 03, 2013 at 2:49 am
I’d always wish to be update on new content using this type of website, saved to bookmarks! .