<div class="btns">
  <a class="btn btn-flat" href="javascript:void(0)">
    <i class="fas fa-home"></i>
  </a>
  <a class="btn btn-shadow" href="javascript:void(0)">
    <i class="fas fa-home"></i>
  </a>
  <a class="btn btn-convex" href="javascript:void(0)">
    <i class="fas fa-home"></i>
  </a>
</div>

$primary: #E6EEF8;
$secondary: #3B4654;

*, *::before, *::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: $secondary;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  color: $secondary;
  background: $primary;
}

.btns {
  display: flex;
  justify-content: space-between;
  width: 400px;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  > i {
    font-size: 3rem;
  }
  
  &-flat {
    background: white;

  }
  
  &-shadow {
    background: white;
    box-shadow: 4px 4px 6px rgba(black, 0.2);
    > i {
      color: transparent;
      background-color: $secondary;
      background-clip: text;
      text-shadow: 2px 2px 4px rgba(white, 0.2);
    }
  }
  
  &-convex {
    background: $primary;
    box-shadow: 
     4px  4px 8px rgba(black, 0.1),
    -4px -4px 8px rgba(white, 1),
     2px  2px rgba(black, 0.1),
    -2px -2px rgba(white, 1);
  }
}