<div class="container">
  <a class="button" href="#0">One</a>
   <a class="button" href="#0">Two</a>
   <a class="button" href="#0">Three</a>
   <a class="button" href="#0">Four</a>
  <a class="button" href="#0">Five</a>
</div>
$height:65;
$depth:6;
$color:#7fbb98;
$text-color:darken($color,10%);
$lighten-on-hover:7%;
$button-speed:.06;
$timing-function: ease-out;
body, html {
  height:100%;
  margin:0;
  
}
body {
   background:#D7702B;
   display:flex;
}
.container {
  margin:auto;
}
.button {
  cursor:pointer;
  margin-left:5px;
  margin-bottom:15px;
  text-shadow:0 -2px 0 darken($color,20%),0 1px 1px lighten($color,20%) ;
  box-sizing:border-box;
  font-size:2em;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration:none;
  font-weight:bold;
  color:$text-color;
  &:visited {
    color:$text-color;
  }
  height:$height+px;
  line-height:$height+px;
  padding: 0 (($height/2)+px);
  display:inline-block;
  width:auto;
  background: linear-gradient(to bottom,
    saturate(lighten($color,15%),35%) 0%,
    saturate(lighten($color,12%),15%) 26%,
    $color 100%);
  border-radius:5px;
  border-top:1px solid lighten($color,22%);
  border-bottom:1px solid lighten($color,20%);
 top:0;
  transition:all ($button-speed + s) $timing-function;
  position:relative;
}
.button:hover {
  background: linear-gradient(to bottom,
    lighten(saturate(lighten($color,15%),35%),$lighten-on-hover) 0%,
    lighten(saturate(lighten($color,12%),15%),$lighten-on-hover) 26%,
    lighten($color,$lighten-on-hover) 100%);
}
.button:active {
  top:$depth+px;
       text-shadow:0 -2px 0 darken($color,0%),0 1px 1px lighten($color,20%), 0 0 4px white ;
  color:lighten($color,45%);
  &:before {
    top:0;
    box-shadow: 0 3px 3px rgba(0,0,0,.7),0 3px 9px rgba(0,0,0,.2);

  }
}
.button:before {
  display:inline-block;
  content:'';
  position:absolute;
  left:0;
  right:0;
  z-index:-1;
  top:($depth)+px;
  border-radius:5px;
  height:($height)+px;
  background: linear-gradient(to top,
    saturate(darken($color,40%),15%) 0%,
    saturate(darken($color,25%),10%) $depth+px);
  transition:all (($button-speed*1.3) + s) $timing-function;
  box-shadow:
    0 1px 0 2px rgba(0,0,0,.3),
    0 5px ($depth*.4+px) rgba(0,0,0,.5),
    0 ($depth*1.8+px) 9px rgba(0,0,0,.2);
    
  
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.