<div class="button-container">
  
  <div class="glass-btn blue-btn">
    <!--<div class="content">
      h
    </div> -->
    <img src="https://i.postimg.cc/DwbWDQTx/facebook.png" alt="facebook" style="width: 5.5em;">
  </div>

  <div class="glass-btn red-btn">
    <!-- <div class="content">
      e
    </div> -->
    <img src="https://i.postimg.cc/LstJ4Hhf/youtube.png" alt="youtube" style="width: 6em;">
  </div>
  
  <div class="glass-btn amber-btn">
    <!-- <div class="content">
      y
    </div> -->
    <img src="https://i.postimg.cc/tgQ1H1Rp/soundcloud.png" alt="soundcloud" style="width: 6em;">
  </div>

</div>

html,
body {
  background-color: #F2F7FD;
  transition: all 0.3s;
  height: 100%;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.glass-btn {
  width: 100px;
  height: 100px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  margin-left: 1em;
  margin-right: 1em;  
  cursor: pointer;
  transition: all 0.3s;

  &.blue-btn {
    -webkit-box-shadow: 0px 20px 20px -17px rgba(0, 111, 255, 0.53);
    -moz-box-shadow: 0px 20px 20px -17px rgba(0, 111, 255, 0.53);
    box-shadow: 0px 20px 20px -17px rgba(0, 111, 255, 0.53);

    &:hover {
      -webkit-box-shadow: 0px 20px 35px -16px rgba(0, 111, 255, 0.65);
      -moz-box-shadow: 0px 20px 35px -16px rgba(0, 111, 255, 0.65);
      box-shadow: 0px 20px 35px -16px rgba(0, 111, 255, 0.65);      
    }

    .content {
      font-size: 4em;
      font-family: "Roboto", sans-serif;
      background: linear-gradient(to right, #006fff, #00acff 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0px 10px 37px rgba(0, 111, 255, 0.8);
    }
  }

  &.red-btn {
    -webkit-box-shadow: 0px 20px 20px -17px rgba(255, 16, 39, 0.5);
    -moz-box-shadow: 0px 20px 20px -17px rgba(255, 16, 39, 0.5);
    box-shadow: 0px 20px 20px -17px rgba(255, 16, 39, 0.5);

    &:hover {
      -webkit-box-shadow: 0px 20px 35px -16px rgba(255, 16, 39, 0.57);
      -moz-box-shadow: 0px 20px 35px -16px rgba(255, 16, 39, 0.57);
      box-shadow: 0px 20px 35px -16px rgba(255, 16, 39, 0.57);      
    }

    .content {
      font-size: 4em;
      font-family: "Roboto", sans-serif;
      background: linear-gradient(to right, #ff1027, #ff4f06 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0px 10px 37px rgba(255, 16, 39, 0.6);
    }
  }

  &.amber-btn {
    -webkit-box-shadow: 0px 20px 20px -17px rgba(255, 159, 16, 0.53);
    -moz-box-shadow: 0px 20px 20px -17px rgba(255, 159, 16, 0.53);
    box-shadow: 0px 20px 20px -17px rgba(255, 159, 16, 0.53);

    &:hover {
      -webkit-box-shadow: 0px 20px 35px -16px rgba(255, 159, 16, 0.6);
      -moz-box-shadow: 0px 20px 35px -16px rgba(255, 159, 16, 0.6);
      box-shadow: 0px 20px 35px -16px rgba(255, 159, 16, 0.6);      
    }

    .content {
      font-size: 4em;
      font-family: "Roboto", sans-serif;
      background: linear-gradient(to right, #ff8d00, #f7ad07 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0px 10px 37px rgba(255, 94, 16, 0.7);
    }
  }

  &:hover {
    background-color: darken(#fafafa, 2%);    
    transform: translateY(-5px);
    transition: all 0.3s;
  }
}