A simple flat button
A Pen by Mario Hernandez on CodePen.
<a class="button" href="#">This is a button</a> |
@import "compass/css3"; | |
body { | |
margin-top: 2em; | |
} | |
.button { | |
display:block; | |
margin: auto; | |
text-align: center; | |
border-radius:4px; | |
text-decoration: none; | |
font-family:'Lucida Grande',helvetica; | |
background: #69c773; | |
background-color: rgb(105, 199, 115); | |
-webkit-box-shadow: 0 4px 0 0 #51a65f; | |
-moz-box-shadow: 0 4px 0 0 #51a65f; | |
box-shadow: 0 4px 0 0 #51a65f; | |
font-size: 20px !important; | |
padding: 15px 20px; | |
width: 250px; | |
color: #FFF; | |
} | |
.button:hover { | |
color: #51A65F; | |
} |