Simple and awesome CSS3 button design.

Their are many websites which shares the code for creating new and awesome CSS3 buttons not only buttons their are also many other websites which shows some awesome styles for HTML/HTML5 element as well as inputs. In this post i'm sharing two button styles which is usually use for designing submit buttons.

When i was new to CSS3 what i used to do is to go on many CSS3 generators website and generate a button and try to understand the code what they have used. You can also try that after reading this post.

CSS: Style properties for button.

input[type=submit] {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}

input[type=submit]:hover {
	background-color:#dfdfdf;
}

input[type=submit]:active {
	position:relative;
	top:1px;
}

CSS: Style properties for button.

input[type=submit] {
	  font-family: Arial;
	  color: #ffffff;
	  font-size: 17px;
	  padding:10px 15px;
	  text-decoration: none;
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  -webkit-box-shadow: 0px 1px 5px #696969;
	  -moz-box-shadow: 0px 1px 5px #696969;
	  box-shadow: 0px 1px 5px #696969;
	  text-shadow: 1px 1px 3px #666666;
	  border: solid #3972b0 1px;
	  background: -webkit-gradient(linear, 0 0, 0 100%, from(#4bb007), to(#59d104));
	  background: -moz-linear-gradient(top, #4bb007, #59d104);
	  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4bb007, endColorStr=#59d104);
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4bb007, endColorStr=#59d104);
	  display:inline-block; /* IE is so silly */
}
input[type=submit]:hover {
	  background: #4bb007;
}