<a href="#" class="button violet">Click me!</a>
<a href="#" class="button indigo">Click me!</a>
<a href="#" class="button slateblue">Click me!</a>
<a href="#" class="button mediumseagreen">Click me!</a>
<a href="#" class="button yellowgreen">Click me!</a>
<a href="#" class="button orange">Click me!</a>
<a href="#" class="button indianred">Click me!</a>









<!-- Fallback for IE 8 and IE 9 -->
<!--[if IE]>
<style>
.button.border:after{
top: 29px;
}
.button.border:hover:before, .button.border:hover:after {
border-bottom: 3px solid #e04e5e;
}
</style>
<![endif]-->












/* General Button Style */
.button{
  position: relative;
	display:block;
	background: transparent;
	width:200px;
	height:60px;
	line-height:60px;
	text-align:center;
	font-size:15px;
	text-decoration:none;
	text-transform:uppercase;
	margin:40px auto;
}
.button:before, .button:after {
	width:200px;
  left: 0px;
	height:27px;
  z-index: -1;
}
.violet{ color: violet; }
.indigo{ color: indigo; }
.slateblue{ color: slateblue; }
.mediumseagreen{ color: mediumseagreen; }
.yellowgreen{ color: yellowgreen; }
.orange{ color: orange; }
.indianred{ color: indianred; }
/* Button Border Style */
.violet:before,.violet:after {
	border: 3px solid violet;
}
.indigo:before,.indigo:after {
	border: 3px solid indigo;
}
.slateblue:before,.slateblue:after {
	border: 3px solid slateblue;
}
.mediumseagreen:before,.mediumseagreen:after {
	border: 3px solid mediumseagreen;
}
.yellowgreen:before,.yellowgreen:after {
	border: 3px solid yellowgreen;
}
.orange:before,.orange:after {
	border: 3px solid orange;
}
.indianred:before,.indianred:after {
	border: 3px solid indianred;
}

.button:before{
  position: absolute;
  content: '';
  border-bottom: none;
  -webkit-transform: perspective(15px) rotateX(5deg);
  -moz-transform: perspective(15px) rotateX(5deg);
  transform: perspective(15px) rotateX(5deg);  
}
.button:after{
  position: absolute;
  top: 32px;
  content: '';
  border-top: none;
  -webkit-transform: perspective(15px) rotateX(-5deg);
  -moz-transform: perspective(15px) rotateX(-5deg);
  transform: perspective(15px) rotateX(-5deg);
}

/* Button Hover Style */
.violet:hover:before, .violet:hover:after {
	background: violet;
}
.indigo:hover:before, .indigo:hover:after {
	background: indigo;
}
.mediumseagreen:hover:before, .mediumseagreen:hover:after {
	background: mediumseagreen;
}
.slateblue:hover:before, .slateblue:hover:after {
	background: slateblue;
}
.yellowgreen:hover:before, .yellowgreen:hover:after {
	background: yellowgreen;
}
.orange:hover:before, .orange:hover:after {
	background: orange;
}
.indianred:hover:before, .indianred:hover:after {
	background: indianred;
}

.button:hover{
	color:#fff;
}

/* Just for presentation */
body{
  position: absolute;
  height: 100%;
  width: 100%;
  background: aliceblue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.