.button2 {
	height: 80px;
	width: 115.5px;
  float:left;
  
}
.button2 .outer {
	width: 100%;
	height: 100%;
	padding: 5px;
	background: rgba(0,0,0,0.65);
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
	-webkit-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
	-moz-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
	-webkit-transform: perspective(500px) rotateX(35deg);
	-moz-transform: perspective(500px) rotateX(35deg);
}
.button2 .outer .height {
	height: 100%;
	margin-top: -15px;
	padding-bottom: 15px;
	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.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
}       
.button2:hover .outer .height {
	margin-top: -10px;
	padding-bottom: 10px;
	background: #3aaf2d;
	box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
	-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;
}
.button2:active .outer .height {
	margin-top: 0px;
	padding-bottom: 0px;
}
.button2 .outer .height .inner {
	line-height: 2.8em;
	font-size: 30px;
	letter-spacing: .05em;
	position: relative;
	height: 100%;
	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 */
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
	-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;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
}
.button2:hover .outer .height .inner{
	text-shadow: #99f48d 0px 0px 1px;
	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 */
}
.button2:active .outer .height .inner{
	text-shadow: #319926 0px 1px 0px;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	-webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	-moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	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 */
}

.box {
	background: linear-gradient(to right, #4ddf3e, #1d7d12);
	color: white;
	--width: 115.5px;
	--height: calc(var(--width) / 3);
	width: var(--width);
	height: var(--height);
	text-align: center;
	line-height: var(--height);
	font-size: calc(var(--height) / 2.5);
	font-family: sans-serif;
	letter-spacing: 0.2em;
	border: 1px solid #fee43e;
	border-radius: 2em;
	transform: perspective(500px) rotateY(-15deg);
	text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
	transition: 0.5s;
	position: relative;
	overflow: hidden;
}

.box:hover {
	transform: perspective(500px) rotateY(15deg);
	text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
	box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}

.box::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, transparent, white, transparent);
	left: -100%;
	transition: 0.5s;
}

.box:hover::before {
	left: 100%;
}