Layered Button

index.html

<div class="btn-wrapper">
  <div class="btn-wrapper__container">
    <div class="btn-inner">
      <a class="btn-inner__text" href="#">Hover Me</a>
    </div>
  </div>
</div>

layered-button.markdown

Layered Button

A Pen by Dronca Raul on CodePen.

License.

style.scss

// Variables
$blue: #15B5E2;
$btn-bg: #10131C;

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('https://image.ibb.co/icbLMF/ep_naturalblack.png');
}

.btn-wrapper {
  width: 290px;
  height: 110px;
  position: relative;
  margin: 40px auto 0;
  
  &:hover {
    .btn-inner {
      top: -4px;
      transform: scale(1, 1);
      cursor: pointer;      
    }
  }      

  &__container {
    border-bottom: 2px solid $blue;
    position: absolute;
    width: 100%;
    height: 80px;
    
    &:before,
    &:after {
      border-bottom: 2px solid $blue;
      width: 96%;
      left: 2%;
      bottom: -8px;
      content: "";
      position: absolute;
    }
    
    &:after {
      width: 92%;
      left: 4%;
      bottom: -14px;
    }
    
    .btn-inner {
      width: 104.2%;
      height: 100%;
      position: absolute;
      top: 20px;
      left: -2.1%;
      border: 2px solid $blue;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Source Code Pro', monospace;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-size: 18px;
      background: $btn-bg;
      transform: scale(.96, .96);
      transition: all .3s;
      z-index: 4;   
      
      &__text {
        text-decoration: none;
        color: $blue;
      }
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />