Botones de estilo plano con CSS3

Vista prévia

Descripción

En este post vamos a crear algunos botones Web de moda plana estilo plano utilizando CSS3 Box-Shadow Property.

Funcionamiento

Crear botones para 3 Estados (normal, Hover y presionado.)

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

El 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;
}