HTML
<div class="container">
<div class="small_buttons">
<a class="button gray" href="#">Button</a>
<a class="button red" href="#">Button</a>
<a class="button purple" href="#">Button</a>
<a class="button blue" href="#">Button</a>
<a class="button green" href="#">Button</a>
<a class="button yellow" href="#">Button</a>
<a class="button orange" href="#">Button</a>
<a class="button dark_blue" href="#">Button</a>
</div>
<div class="wide_buttons">
<a class="button red" href="#">Button</a>
<a class="button blue" href="#">Button</a>
<a class="button green" href="#">Button</a>
<a class="button dark_blue" href="#">Button</a>
</div>
</div>
CSS
.container{
width: 520px;
margin:auto;
padding:40px;
}
.small_buttons .button{
width: 80px;
display: block;
float: left;
border-radius:3px;
margin: 10px 10px 10px 10px;
padding:15px;
text-align:center;
text-decoration:none;
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ecf0f1;
}
.wide_buttons .button{
width: 100%;
display: block;
float: left;
border-radius:3px;
margin: 10px 0px 10px 0px;
padding:15px 0px;
text-align:center;
text-decoration:none;
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ecf0f1;
}
.button:active{
position:relative;
top:6px;
}
/*.button:after{
box-shadow:0px 5px 15px 5px rgba(0,0,0,0.3);
}*/
.gray{
box-shadow: 0px 6px #7f8c8d;
background: #95a5a6;
}
.gray:active{
box-shadow: 0px 0px #7f8c8d;
background: #7f8c8d;
}
.red{
box-shadow: 0px 6px #c0392b;
background: #e74c3c;
}
.red:active{
box-shadow: 0px 0px #c0392b;
background: #c0392b;
}
.purple{
box-shadow: 0px 6px #8e44ad;
background: #9b59b6;
}
.purple:active{
box-shadow: 0px 0px #8e44ad;
background: #8e44ad;
}
.blue{
background: #3498db;
box-shadow: 0px 6px #2980b9;
}
.blue:active{
background: #2980b9;
box-shadow: 0px 0px #2980b9;
}
.green{
box-shadow: 0px 6px #27ae60;
background: #2ecc71;
}
.green:active{
box-shadow: 0px 0px #23A33D;
background: #23A33D;
}
.yellow{
box-shadow: 0px 6px #f39c12;
background: #f1c40f;
}
.yellow:active{
box-shadow: 0px 0px #f39c12;
background: #f39c12;
}
.orange{
box-shadow: 0px 6px #d35400;
background: #e67e22;
}
.orange:active{
box-shadow: 0px 0px #d35400;
background: #d35400;
}
.dark_blue{
box-shadow: 0px 6px #2c3e50;
background: #34495e;
}
.dark_blue:active{
box-shadow: 0px 0px #2c3e50;
background: #2c3e50;
}
1 Response