Back to the blog post

Simple 3D like buttons

With a div!
button {
	padding: 10px;
	background: #ec6161;
	border: none;
	font: 900 12px/1 Helvetica, Arial, sans-serif;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	border-radius: 10px;
	box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1), inset 0 -1px 0 #ff8d8d, 0 4px 0 #b64a4a, 0 6px 4px rgba(0,0,0,0.3);
	/* add prefixes... */
	transition: background .2s ease-out; }
button:hover {
	background: #da5959; }
button:active {
	box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1), inset 0 -1px 0 #ff8d8d, 0 4px 0 #b64a4a, 0 5px 2px rgba(0,0,0,0.3); }