bueltge
1/11/2012 - 9:25 AM

Nice button with CSS3 - to view or play: http://dabblet.com/gist/1593891

Nice button with CSS3 - to view or play: http://dabblet.com/gist/1593891

settings.json
content_copyfile_download
{"view":"split-vertical","prefixfree":"1","page":"css"}
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->
<a class="button" href="#">Button</a>
dabblet.css
content_copyfile_download
body {
	margin: 3em;
}
.button {
	padding: 10px 15px;
	background: #4479BA;
	text-decoration: none;
	color: #FFF;
	border-radius: 4px;
	border: solid 1px #20538D;
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	transition-duration: 0.2s;
}
.button:hover {
	background: #356094;
	border: solid 1px #2A4E77;
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.9);
	text-decoration: underline;
}
.button:active {
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	background: #2E5481;
	border: solid 1px #203E5F;
}