CSS3 introduced some effects like text-shadow, border-radius, background gradient without using images. In this post we will create simple CSS3 button having all these effects. Create excellent CSS3 HTML5 Button using latest html5 and css3 properties without images.

HTML Part

 <a href="#" title="" class="button">Click Me</a> 

CSS Part

/* Styling button */

a.button{
	color:white;
	padding:5px 20px;
	text-shadow:1px 1px 0 #145982;
	font-family:Arial,Helvetica,sans-serif;
	font-size:15px;
	font-weight:bold;
	text-align:center;
	border:1px solid #60b4e5;
	margin:50px auto;
	float:left;
	clear:both;
	/*
		CSS3 gradients for webkit and mozilla browsers fallback color for the rest:
	*/

	background-color: #59aada;
	background-image: -moz-linear-gradient(#F902B6, #FFA4E6);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F902B6), to(#FFA4E6));
	box-shadow:3px 3px 3px #000000;
	-moz-box-shadow:3px 3px 3px #000000;
	-webkit-box-shadow:3px 3px 3px #000000;
	border:1px solid #F902B6;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

a.button:hover{
	/* Lighter gradients for the hover effect */
	text-decoration:none;
	background-color: #F902B6;
	background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
	box-shadow:3px 3px 3px #333;
	-moz-box-shadow:3px 3px 3px #333;
	-webkit-box-shadow:3px 3px 3px #333;
}

Final Complete Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS3 Butons</title>
<style type="text/css">
/* Styling button */

a.button{
	color:white;
	padding:5px 20px;
	text-shadow:1px 1px 0 #145982;
	font-family:Arial,Helvetica,sans-serif;
	font-size:15px;
	font-weight:bold;
	text-align:center;
	border:1px solid #60b4e5;
	margin:50px auto;
	float:left;
	clear:both;
	/*
		CSS3 gradients for webkit and mozilla browsers fallback color for the rest:
	*/

	background-color: #59aada;
	background-image: -moz-linear-gradient(#F902B6, #FFA4E6);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F902B6), to(#FFA4E6));
	box-shadow:3px 3px 3px #000000;
	-moz-box-shadow:3px 3px 3px #000000;
	-webkit-box-shadow:3px 3px 3px #000000;
	border:1px solid #F902B6;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

a.button:hover{
	/* Lighter gradients for the hover effect */
	text-decoration:none;
	background-color: #F902B6;
	background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
	box-shadow:3px 3px 3px #333;
	-moz-box-shadow:3px 3px 3px #333;
	-webkit-box-shadow:3px 3px 3px #333;
}
</style>
</head>

<body>
<a href="#" title="" class="button">Click Me</a><br />
</body>
</html>
[download_demo_box demo="http://snilesh.com/demo/html5_css3_buttons.html" demo_alt="HTML5 CSS3 Button" [/download_demo_box]