Flat Styled Buttons with CSS3

In this post we’re going to create some trendy fashion flat styled web buttons by using CSS3 box-shadow property.

How to use it:

Create buttons for 3 states (normal, hover and pressed.)

<div class="wrap">
<div class="normal"> Normal </div>
<div class="hover"> hover </div>
<div class="pressed"> Pressed </div>
</div>

The CSS

.normal {
border-radius: 5px;
background-color: #2ecc71;
-webkit-box-shadow: inset 0 -6px 1px rgba(123,123,123,.34);
box-shadow: inset 0 -6px 1px rgba(123,123,123,.34);
color: #fff;
text-align: center;
padding: 10px 50px;
font-size: 42px;
font-family: arial;
font-weight: bold;
display: inline-block;
width: 200px;
}
.hover {
border-radius: 5px;
background-color: #34e57f;
-webkit-box-shadow: inset 0 -6px 1px rgba(123,123,123,.34);
box-shadow: inset 0 -6px 1px rgba(123,123,123,.34);
color: #fff;
text-align: center;
padding: 10px 50px;
font-size: 42px;
font-family: arial;
font-weight: bold;
display: inline-block;
width: 200px;
}
.pressed {
border-radius: 5px;
background-color: #29b564;
-webkit-box-shadow: inset 0 5px 0px rgba(123,123,123,.34);
box-shadow: inset 0 5px 0px rgba(123,123,123,.34);
color: #fff;
text-align: center;
padding: 10px 50px;
font-size: 42px;
font-family: arial;
font-weight: bold;
display: inline-block;
width: 200px;
}
.wrap {
width: 200px;
margin: 0 auto;
}
div {
margin: 10px 0px;
}