Chunky 3D button

by Greg Bowler

HTML

<a href="#" class="button">Press Me</a>

CSS

body {
	font-family: Helvetica, Arial, sans-serif;
	background: #d6d6d6;
	text-align: center;
	padding: 50px 0px;
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 400;
}

.button {
    position: relative;
    display: inline-block;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	background-color: #538fbe;
	padding: 20px 70px;
	font-size: 24px;
	border: 1px solid #2d6898;
	background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
	border-radius: 5px;
    
    box-shadow: 
        0px 16px 0px #2b638f, 
        0px 1px 6px rgba(0,0,0,.4), 
        inset 0px 1px 0px rgba(255,255,255,.3),
        inset 0px 0px 3px rgba(255,255,255,.5);
	
    text-shadow: 0px -1px 0px rgba(0,0,0,.5);
	
    -webkit-transition: all .1s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
    
    -webkit-transform: rotateX(20deg);
}

.button:active {
    box-shadow: 
        0px 8px 0px #2b638f, 
        0px 1px 6px rgba(0,0,0,.4), 
        inset 0px 1px 0px rgba(255,255,255,.3),
        inset 0px 0px 3px rgba(255,255,255,.5);
    
	background-image: linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
	
    -webkit-transform: translate(0, 8px) rotateX(20deg);  
    -moz-transform: translate(0, 8px) rotateX(20deg);  
    transform: translate(0, 8px) rotateX(20deg);  
}