I have been having a lot of fun messing around with CSS3 and received a lot of emails since I posted my tutorial for Creating Shadows with CSS3. I decided that putting together a quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button would show people just how amazing CSS3 is.

The only draw back to using some of these effects is that they are not 100% cross browser compatible. Check out this page in the latest versions of Firefox, Safari or Chrome to really see the effects in action.

I’m going to style an anchor tag for my button so first I need to create some HTML:

<a href="#" class="button">This is my button</a>

Now comes the fun part. Let’s start with the basic CSS necessary for our button:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	}

This is my button

Now let’s add some rounded corners:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	}

This is my button

Next comes the shadows:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	}

This is my button

And finally, the gradient:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
	background: -moz-linear-gradient(top,  #eeeeee,  #cccccc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
	}

This is my button

For fun, let’s add a active effect to make the button actually look like it is being pressed when you click on it:

a:active.button {
	box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	-moz-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	position: relative;
	top: 1px;
	left: 1px;
	}

This is my button