A Pen by Derick Montague.

Chris-Coyiers-CSS-Button-Test.markdown

Chris Coyier's CSS Button Test

A Pen by Derick Montague on CodePen.

License.

index.html

 
<a class="btn-sweet" href=""><span>Checkout</span></a>
<br /><br />
<img src="http://i.imgur.com/gnZnY.png">

style.css

.btn-sweet {
			display: inline-block;
			padding: .5em;
			background: #c7c7c7;
			border: 2px solid #555;
			border-radius: 20px;
			box-shadow: inset 0 0 1px 2px rgba(255,255,255,.8);
		}
		.btn-sweet span:before, .btn-sweet span:after {
			content: "\2605";
			display: inline-block;
			color: #888;
			margin: .14em .5em 0;
		}
		.btn-sweet span {
			display: inline-block;
			color: #555;
			border-radius: 10px;
			box-shadow: 0 1px 5px rgba(0,0,0,.75);
			background: #e0e0e0;
			background: -moz-linear-gradient(top, #e0e0e0 0%, #d3d3d3 50%, #c7c7c7 50%, #adadad 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(50%,#d3d3d3), color-stop(50%,#c7c7c7), color-stop(100%,#adadad));
			background: -webkit-linear-gradient(top, #e0e0e0 0%,#d3d3d3 50%,#c7c7c7 50%,#adadad 100%);
			background: -o-linear-gradient(top, #e0e0e0 0%,#d3d3d3 50%,#c7c7c7 50%,#adadad 100%);
			background: -ms-linear-gradient(top, #e0e0e0 0%,#d3d3d3 50%,#c7c7c7 50%,#adadad 100%);
			background: linear-gradient(to bottom, #e0e0e0 0%,#d3d3d3 50%,#c7c7c7 50%,#adadad 100%);
			font: bold 150%/1.5 sans-serif;
			text-transform: uppercase;
			text-shadow: 0 1px 0 rgba(255,255,255, .8);
			text-decoration: none;
			padding: .4em;
		}