<a class="button" >Download</a>
<br><br><br>
<a class="button" >Submit</a>
<a class="button" >Reset</a>
<br><br><br>
<a class="button" >Join The Epic Site Today</a>
<br><br><br>
<a class="button pushed" >Pushed Effect</a>
body {
padding: 20px 0;
text-align: center;
font-family: 'Helvetica', Helvetica, sans-serif;
font-size: 13px;
}
.button {
font-weight: bold;
text-shadow: 0 1px 0 white;
text-decoration: none;
color: black;
background-color: #F2F2F2;
padding: 9px 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background-image: -webkit-linear-gradient(90deg, #DBDBDB, #F2F2F2);
background-image: -moz-linear-gradient(90deg, #DBDBDB, #F2F2F2);
background-image: -ms-linear-gradient(90deg, #DBDBDB, #F2F2F2);
background-image: -o-linear-gradient(90deg, #DBDBDB, #F2F2F2);
background-image: linear-gradient(90deg, #DBDBDB, #F2F2F2);
border: 1px solid #B3B3B3;
-webkit-box-shadow: inset 0 0 2px 1px white, 0 2px 5px rgba(0,0,0,0.15), inset 0 -17px 0 rgba(0,0,0,0.06);
-moz-box-shadow: inset 0 0 2px 1px white, 0 2px 5px rgba(0,0,0,0.15), inset 0 -17px 0 rgba(0,0,0,0.06);
box-shadow: inset 0 0 2px 1px white, 0 2px 5px rgba(0,0,0,0.15), inset 0 -17px 0 rgba(0,0,0,0.06);
}
.button.pushed {
position: relative;
}
.button:hover {
background-image: -webkit-linear-gradient(90deg, #E8E8E8, #F7F7F7);
background-image: -moz-linear-gradient(90deg, #E8E8E8, #F7F7F7);
background-image: -ms-linear-gradient(90deg, #E8E8E8, #F7F7F7);
background-image: -o-linear-gradient(90deg, #E8E8E8, #F7F7F7);
background-image: linear-gradient(90deg, #E8E8E8, #F7F7F7);
}
.button.pushed:active {
top: 2px;
}
.button:active {
-webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.1), inset 0 -17px 0 rgba(0,0,0,0.06);
-moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.1), inset 0 -17px 0 rgba(0,0,0,0.06);
box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.1), inset 0 -17px 0 rgba(0,0,0,0.06);
}