Simple CSS3 Buttons - Snippet

Preview
HTML
CSS
JS

<div id="container">
	<p>
		<a href="#" class="button">Button</a>
		<a href="#" class="button red">Button</a>
		<a href="#" class="button green">Button</a>
		<a href="#" class="button blue">Button</a>
		<a href="#" class="button yellow">Button</a>
		<a href="#" class="button orange">Button</a>
	</p>
	<p>
		<a href="#" class="button small">Small Button</a>
		<a href="#" class="button small red">Small Button</a>
		<a href="#" class="button small green">Small Button</a>
		<a href="#" class="button small blue">Small Button</a>
		<a href="#" class="button small yellow">Small Button</a>
		<a href="#" class="button small orange">Small Button</a>
	</p>
	<p style="margin-top:1.5em">
		<a href="#" class="button large">Large Button</a>
		<a href="#" class="button large red">Large Button</a>
		<a href="#" class="button large green">Large Button</a>
		<a href="#" class="button large blue">Large Button</a>
		<a href="#" class="button large yellow">Large Button</a>
		<a href="#" class="button large orange">Large Button</a>
	</p>
	<p style="margin-top:2em">
		<strong>Button and Input elements:</strong>
	</p>
	<p>
		<button class="button small">Submit</button>
		<button class="button">Submit</button>
		<input type="submit" class="button large" value="Submit" />
	</p>
	<div id="dark">
		<p>
			<a href="#" class="button">Button</a>
			<a href="#" class="button red">Button</a>
			<a href="#" class="button green">Button</a>
			<a href="#" class="button blue">Button</a>
			<a href="#" class="button yellow">Button</a>
			<a href="#" class="button orange">Button</a>
		</p>
		<p>
			<a href="#" class="button small">Small Button</a>
			<a href="#" class="button small red">Small Button</a>
			<a href="#" class="button small green">Small Button</a>
			<a href="#" class="button small blue">Small Button</a>
			<a href="#" class="button small yellow">Small Button</a>
			<a href="#" class="button small orange">Small Button</a>
		</p>
		<p style="margin-top:1.5em">
			<a href="#" class="button large">Large Button</a>
			<a href="#" class="button large red">Large Button</a>
			<a href="#" class="button large green">Large Button</a>
			<a href="#" class="button large blue">Large Button</a>
			<a href="#" class="button large yellow">Large Button</a>
			<a href="#" class="button large orange">Large Button</a>
		</p>
	</div>
</div>

body { font: 100%/1.5 Helvetica, Arial, sans-serif }

p { margin-bottom: 1em }

#container {
    width: 900px;
    margin: 0 auto;
}

#dark {
    padding: 1em;
    background: #333;
}

/* Buttons */
		.button {
			position:relative;
			cursor:pointer;
			font:bold 12px/normal 'Segoe UI', Arial, sans-serif;
			color:#333;
			text-decoration:none;
			text-shadow:1px 1px rgba(255,255,255,0.5);
			padding:5px 10px 6px;
			border:1px solid;
			border-color:#CCC;
			border-color:rgba(0,0,0,0.3);
			border-bottom-color:rgba(0,0,0,0.5);
			border-radius:3px;
			background-color:#EEE;
			background-image:-webkit-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
			background-image:   -moz-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
			background-image:     -o-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
			background-image:        linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
			-webkit-box-shadow:inset 1px 1px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.3), inset 0 -2px 2px -2px rgba(0,0,0,0.5);
			   -moz-box-shadow:inset 1px 1px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.3), inset 0 -2px 2px -2px rgba(0,0,0,0.5);
			        box-shadow:inset 1px 1px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.3), inset 0 -2px 2px -2px rgba(0,0,0,0.5);
			-webkit-user-select:none;
			   -moz-user-select:none;
			        user-select:none;
		}
		.button::-moz-focus-inner {margin:0; padding:0; border:0;}
		a.button {outline:0;}
		.button:hover, .button:focus, .button:active {
			text-decoration:none;
			background-color:#F9F9F9;
			background-image:-webkit-linear-gradient(rgba(255,255,255,0.4), rgba(0,0,0,0.3));
			background-image:   -moz-linear-gradient(rgba(255,255,255,0.4), rgba(0,0,0,0.3));
			background-image:     -o-linear-gradient(rgba(255,255,255,0.4), rgba(0,0,0,0.3));
			background-image:        linear-gradient(rgba(255,255,255,0.4), rgba(0,0,0,0.3));
		}
		.button:active {
			top:1px;
			background-image:-webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
			background-image:   -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
			background-image:     -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
			background-image:        linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
		}
		.button:active:after {content:''; position:absolute; top:-2px; left:0; right:0; height:1px;}
		
		/* Sizes */
			.button.small {padding:3px 8px 4px; font-size:10px;}
			.button.large {padding:10px 20px 11px; font-size:14px;}

		/* Colors */
			.button.red, .button.green, .button.blue, .button.yellow, .button.orange {color:#FFF; text-shadow:0 -1px rgba(0,0,0,0.15);}
			.button.red {background-color:#E62727;}
			.button.green {background-color:#91BD09;}
			.button.blue {background-color:#2981E4;}
			.button.yellow {background-color:#FFB515;}
			.button.orange {background-color:#FF5C00;}