<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a href="#" class="button">Already Taken? <i class="icon-chevron-right"></i></a>
@import url(https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
body{
background: #ECECEC;
margin:0px ;
color:#333;
}
a.button{
background: #ECECEC;
border-radius: 15px;
padding: 10px 20px;
display: block;
font-family: arial;
font-weight: bold;
color:#7f7f7f;
text-decoration: none;
text-shadow:0px 1px 0px #fff;
border:1px solid #a7a7a7;
width: 145px;
margin:0px auto;
margin-top:100px;
box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
-webkit-transition:box-shadow 0.5s;
}
a.button i{
float: right;
margin-top: 2px;
}
a.button:hover{
box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
}
a.button:active{
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
background:-webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
}
