<div class='main-content'>
   <div class='header-group'>
      <h1>CSS Animations - Box Shadows</h1>
   </div>
<div class='btn-group'>
   <a href="#" class='btn' id='btn1'>Slight box shadow</a>
   <a href="#" class='btn' id='btn2'>More box shadow</a>
</div>
</div>   

body {
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
}
.header-group {
   display: block;
   text-align: center;
}
h1 {
   position: relative;
   display: inline-block;
   text-align: center;
   font-size: 3rem;
   margin-bottom: 1em;
   padding: 0.25em 0;
}
h1:after {
   content: "";
   border-bottom: 3px solid black;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}
.main-content {
   margin-top: 5vw;
}
.btn-group {
   display: block;
   width: 100%;
   clear: both;
   text-align: center;
   .btn {
      display: block;
      width: 8em;
      padding: 1em 2.5em;
      margin: 0 auto 1.5em;
      background-color: lighten(blue, 15%);
      color: white;
      text-decoration: none;
      box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 2px 3px rgba(0,0,0,0.24);
      transition: all .4s ease-out;
   }
   #btn1:hover {
      box-shadow: 0 2px 7px rgba(74, 73, 73, 0.46), 0 3px 6px rgba(108, 108, 108, 0.32);
   }
   #btn2:hover {
      box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
   }
}