<div class="button"><div class="outer"><div class="height"><div class="inner">CLICK ME</div></div></div></div>
html, body {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: Impact;
    background: url('images/bg.gif') repeat 0 0;
    background-color: #222222;
}

* {
-webkit-user-select: none;
 -khtml-user-select: none;
   -moz-user-select: none;
   -moz-user-select: -moz-none;
    -ms-user-select: none;
	 -o-user-select: none;
        user-select: none;
	
	outline-style:none;/*IE*/
	-webkit-touch-callout: none;
}

.button {
	height: 80px;
	width: 180px;
	cursor: pointer;
	margin: 50px auto;
}
.button .outer {
	position: relative;
  overflow:hidden;
	width: 100%;
	height: 100%;
	padding: 1px;
	background: rgba(50,50,50,0.75);
	-webkit-border-radius: 7px;
	   -moz-border-radius: 7px;
	    -ms-border-radius: 7px;
	        border-radius: 7px;
	-webkit-box-shadow: #101010 0px 0px 2px 1px,#353535 0px 1px 0px 10px,#151515 0px 1px 0px 11px, inset rgb(50, 50, 50) 0px 5px 15px 0px, inset rgb(0, 0, 0) 0px 15px 25px 0px;
	   -moz-box-shadow: #101010 0px 0px 2px 1px,#353535 0px 1px 0px 10px,#151515 0px 1px 0px 11px, inset rgb(50, 50, 50) 0px 5px 15px 0px, inset rgb(0, 0, 0) 0px 15px 25px 0px;
	    -ms-box-shadow: #101010 0px 0px 2px 1px,#353535 0px 1px 0px 10px,#151515 0px 1px 0px 11px, inset rgb(50, 50, 50) 0px 5px 15px 0px, inset rgb(0, 0, 0) 0px 15px 25px 0px;
          box-shadow: #101010 0px 0px 2px 1px,#353535 0px 1px 0px 10px,#151515 0px 1px 0px 11px, inset rgb(50, 50, 50) 0px 5px 15px 0px, inset rgb(0, 0, 0) 0px 15px 25px 0px;
        /*box-shadow: #151515 0px 1px 1px 5px, inset rgba(40,40,40,0.9) 0px 6px 25px 0px, inset rgba(0,0,0,0.85) 0px 15px 25px 0px;*/

	-webkit-transform: perspective(500px) rotateX(40deg);
     -moz-transform: perspective(500px) rotateX(40deg);
	    -ms-transform: perspective(500px) rotateX(40deg);
	        transform: perspective(500px) rotateX(40deg);
}
.button .outer .height {
	position: relative;
	width: 100%;
	height: 100%;
	margin-top: 0px;
	padding-bottom: 0px;
	background: #39a02d;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
	-webkit-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
	-moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
	-webkit-transition: all 0.05s ease-in-out;
	   -moz-transition: all 0.05s ease-in-out;
      -ms-transition: all 0.05s ease-in-out;
          transition: all 0.05s ease-in-out;
}       
.button:hover .outer .height {
	background: #3aaf2d;
	-webkit-box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
	   -moz-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
      -ms-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
          box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
}
.button .outer .height .inner {
	position: relative;
	width: 100%;
	height: 100%;
	line-height: 250%;
  color: #0e420e;
	font-size: 2.5rem;
	letter-spacing: 1px;
	text-align: center;
	text-shadow: #8aff7b 0px 0px 1px;
	background: #44d135;
	background: -moz-linear-gradient(top, #80ec75 0%, #43d034 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80ec75), color-stop(100%,#43d034)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #80ec75 0%,#43d034 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(top, #80ec75 0%,#43d034 100%); /* W3C */
	-webkit-border-radius: 6px 6px 5px 5px;
	   -moz-border-radius: 6px 6px 5px 5px;
	    -ms-border-radius: 6px 6px 5px 5px;
          border-radius: 6px 6px 5px 5px;
	-webkit-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
	   -moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
	    -ms-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
	        box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
	-webkit-transition: all 0.05s ease-in-out;
	   -moz-transition: all 0.05s ease-in-out;
      -ms-transition: all 0.05s ease-in-out;
          transition: all 0.05s ease-in-out;
}
.button:hover .outer .height .inner{
	color: #006400;
	background: #43d034; /* Old browsers */
	background: -moz-linear-gradient(top, #43d034 0%, #67e45c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43d034), color-stop(100%,#67e45c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #43d034 0%,#67e45c 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(top, #43d034 0%,#67e45c 100%); /* W3C */
}

.buttonactive1 {
	margin-top: 10px!important;
	padding: 0px 1px!important;
  background:none!important;
}
.buttonactive2 {
	font-size: 2.35rem!important;
  text-shadow: rgb(160, 255, 0) -15px -5px 50px, rgb(160, 255, 0) 15px 5px 50px!important;
	-webkit-border-radius: 8px 8px 4px 4px!important;
	   -moz-border-radius: 8px 8px 4px 4px!important;
	    -ms-border-radius: 8px 8px 4px 4px!important;
	        border-radius: 8px 8px 4px 4px!important;
	-webkit-box-shadow: inset rgba(0, 0, 0, 0.5) 5px -3px 10px 1px, inset rgba(0, 0, 0, 0.5) 0px 5px 10px 1px, inset rgba(0, 0, 0, 0.5) -5px -5px 10px 1px!important;
	   -moz-box-shadow: inset rgba(0, 0, 0, 0.5) 5px -3px 10px 1px, inset rgba(0, 0, 0, 0.5) 0px 5px 10px 1px, inset rgba(0, 0, 0, 0.5) -5px -5px 10px 1px!important;
	    -ms-box-shadow: inset rgba(0, 0, 0, 0.5) 5px -3px 10px 1px, inset rgba(0, 0, 0, 0.5) 0px 5px 10px 1px, inset rgba(0, 0, 0, 0.5) -5px -5px 10px 1px!important;
	        box-shadow: inset rgba(0, 0, 0, 0.5) 5px -3px 10px 1px, inset rgba(0, 0, 0, 0.5) 0px 5px 10px 1px, inset rgba(0, 0, 0, 0.5) -5px -5px 10px 1px!important;
	background: #1d7d12; /* Old browsers */
	background: -moz-linear-gradient(top, #1d7d12 0%, #4fd342 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d7d12), color-stop(100%,#4fd342)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* W3C */
}
$(document).ready(function(){
$(".button").click(function(){
$(".height").toggleClass("buttonactive1");
$(".inner").toggleClass("buttonactive2");
});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js