<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>
.container{
  width: 520px;
  margin:auto;
}
.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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.