CSS3 Button

Nice button with no graphics - simple css3. Has regular, hovered and pressed style.
Auto width and height.

and I am simple div

and I am simple div
with <br /> and auto width.

HTML

<a href="#some_link" class="css_button">I am simple link</a>

or...

<div class="css_button">and I am simple div</div>

CSS

.css_button {
	display: inline-block;
	margin: 0 0 20px 0;
	padding: 10px 25px 10px 20px;
	color: rgba(255,255,255,0.8);
	text-decoration: none;
	background: rgba(40,100,200,1);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: rgba(15,60,130,1) 0 3px 0, inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
	-moz-box-shadow: rgba(15,60,130,1) 0 3px 0, inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
	-webkit-box-shadow: rgba(15,60,130,1) 0 3px 0, inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
	position: relative;
	top: 10px;
	font-size: 20px !important;
	overflow: hidden;
	border: none;
	cursor: pointer;
	outline: none;
}

.css_button:after {
	content: '';
	width: 200%;
	margin-left: -50px;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	background: none;
	box-shadow: rgba(255,255,255,0.2) 0 1px 20px, inset rgba(0,0,0,0.2) 0 0 10px;
	-moz-box-shadow: rgba(255,255,255,0.2) 0 1px 20px, inset rgba(0,0,0,0.2) 0 0 10px;
	-webkit-box-shadow: rgba(255,255,255,0.2) 0 1px 20px, inset rgba(0,0,0,0.2) 0 0 10px;
}

.css_button:before {
	content: '';
	width: 50%;
	height: 100px;
	position: absolute;
	top: 100%;
	left: 25%;
	border-radius:500px;
	background: none;
	box-shadow: rgba(255,255,255,0.5) 0 1px 20px;
	-moz-box-shadow: rgba(255,255,255,0.5) 0 1px 20px;
	-webkit-box-shadow: rgba(255,255,255,0.5) 0 1px 20px;
}

.css_button:hover {
	background: rgba(45,115,230,1);
	box-shadow: rgba(15,60,130,0.8) 0 3px 0, inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
	-moz-box-shadow: rgba(15,60,130,0.8) 0 3px 0, inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
	-webkit-box-shadow: rgba(15,60,130,0.8) 0 3px 0, inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
}

.css_button:active {
	background: rgba(40,100,200,0.8);
	box-shadow: inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
	-moz-box-shadow: inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
	-webkit-box-shadow: inset rgba(255,255,255,0.05) 0 -1px 0, inset rgba(255,255,255,0.1) 0 1px 0;
	top: 13px;
}

Unfortunately there is no way to use :after and :before selectors on input elements. But we allways can use links (<a href="">links</a>) and blocks (<div>blocks</div>) instead of input.