Stackoverflow Answer

by Aaron Kahlhamer

HTML

<div class="grid-70 prefix-15 mobile-grid-100 tablet-grid-100"> <span class="cta-btn cl-effect-18"><a href="#contact-section" class="drop1 cl-effect-18">Recent Update</a></span>
 <span class="cta-btn cl-effect-18"><a href="#contact-section" class="drop1 cl-effect-18">Who We are</a></span>
</div>

CSS

.cl-effect-18 a::before, .cl-effect-18 a::after {
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      height: 20px;
      margin-top: -1px;
      background: gray;
      content:'';
      z-index: -1;
      pointer-events: none;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
      -moz-transition: -moz-transform 0.3s, opacity 0.3s;
      transition: transform 0.3s, opacity 0.3s;
  }
  .cl-effect-18 a::before {
      background:red;
      height:20px;
      -webkit-transform: translateY(-20px);
      -moz-transform: translateY(-20px);
      transform: translateY(-20px);
  }
  .cl-effect-18 a::after {
      background:green;
      height:20px;
      -webkit-transform: translateY(20px);
      -moz-transform: translateY(20px);
      transform: translateY(20px);
  }
  .cl-effect-18 a:hover::before {
      background:blue;
      height:20px;
      -webkit-transform:translateY(-30px) ;
      transform: translateY(-30px);
      transition:0.3s;
  }
  .cl-effect-18 a:hover::after {
      background:orange;
      height:20px;
      -webkit-transform:translateY(30px);
      transform: translateY(30px);
      transition:0.3s;
  }