<!DOCTYPE html>
<html>

<head>
<style>

/*red #ed1c24*/
/*blue #008ddb*/
.btn-center{
width:100%;
height:100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
}
.btn-left{
width:100%;
height:100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: flex-start;
}
.btn-wrapper{
perspective: 1000px;
}
.btn-wrapper .btn-box-area{
position: relative;
height: 45px;
width: 150px;
transform-style: preserve-3d;
transition: transform 200ms ease-in-out;
transform: translateZ(-25px);

}
.btn-wrapper .btn-box-area:hover{transform: rotateX(-90deg) translateY(25px);}
.btn-wrapper .btn-box{position: absolute;
backface-visibility: hidden;
width:100%;
height:100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px
}
.btn-wrapper .side-one{
background-color: #ed1c24;
border: 2px solid #ed1c24;
color: #fff;
transform: translateZ(25px);
text-transform: uppercase;
}
.btn-wrapper .side-two{
color: #fff;
background-color: #000;
border: 2px solid #000;
transform: rotateX(90deg) translateZ(25px);

}
.btn-wrapper .side-one a, .btn-wrapper .side-two a{text-decoration: none; color: #fff;}
</style>
</head>

<body>
<div class=”btn-left”>
<div class=”btn-wrapper”>
<div class=”btn-box-area”>
<div class=”btn-box side-one”><a href=”http://epicems.com/contact-us/”>Contact Us</a></div>
<div class=”btn-box side-two”><a href=”http://epicems.com/contact-us/”>Contacts Us</a></div>
</div>
</div>
</div>

<div class=”btn-center”>
<div class=”btn-wrapper”>
<div class=”btn-box-area”>
<div class=”btn-box side-one”><a href=”http://epicems.com/contact-us/”>Contact Us</a></div>
<div class=”btn-box side-two”><a href=”http://epicems.com/contact-us/”>Contacts Us</a></div>
</div>
</div>
</div>

</body>

</html>