Create a Sleek CSS3 Button Under a Minute

Tweet

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

Related Articles

• 6 CSS Tutorials That Take You From Beginner to Expert
• Getting the Most Out of Your Blog’s RSS Feed
• Automatically Create a Bit.ly URL for WordPress Posts
• 10 Ways to Instantly Speed Up Your Website

© 2010 DevMoose | Create a Sleek CSS3 Button Under a Minute">Permalink