<button>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M17.622 3c-1.913 0-2.558 1.382-5.623 1.382-3.009 0-3.746-1.382-5.623-1.382-5.209 0-6.376 10.375-6.376 14.348 0 2.145.817 3.652 2.469 3.652 3.458 0 2.926-5 6.915-5h5.23c3.989 0 3.457 5 6.915 5 1.652 0 2.471-1.506 2.471-3.651 0-3.973-1.169-14.349-6.378-14.349zm-10.622 10c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zm10-6c.552 0 1 .447 1 1 0 .553-.448 1-1 1s-1-.447-1-1c0-.553.448-1 1-1zm-2 4c-.552 0-1-.447-1-1 0-.553.448-1 1-1s1 .447 1 1c0 .553-.448 1-1 1zm2 2c-.552 0-1-.447-1-1 0-.553.448-1 1-1s1 .447 1 1c0 .553-.448 1-1 1zm2-2c-.552 0-1-.447-1-1 0-.553.448-1 1-1s1 .447 1 1c0 .553-.448 1-1 1zm-10.25-1c0 .965-.785 1.75-1.75 1.75s-1.75-.785-1.75-1.75.785-1.75 1.75-1.75 1.75.785 1.75 1.75z"/>
  </svg>
  <div class="text">Game</div>
</button>
<button>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/>
  </svg>
  <div class="text">Settings</div>
</button>
<button>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z" fill-rule="evenodd" clip-rule="evenodd"/>
  </svg>
  <div class="text">Twitch</div>
</button>

$background: #151511;
$foreground: #fff;

$primary-lighter: #FFCDD2;
$primary-light: #E57373;
$primary: #F44336;
$primary-dark: #D32F2F;
$primary-darker: #B71C1C;

$transition-time: 0.5s;

body {
  background: #151515;
  margin: 2rem;
}

button {
  position: relative;
  padding: 0;
  height: 12rem;
  width: 12rem;
  border: 0.6rem solid #555;
  background: #555;
  overflow: hidden;
  transition: transform $transition-time/2 ease-out;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  .icon {
    fill: #fff;
    width: 4rem;
    height: 4rem;
  }
  .text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4rem;
    text-align: left;
    font-size: 1.1rem;
    color: #fff;
    background: $primary-darker;
    padding: 0.75rem;
    transition: none;
  }
  &:hover {
    cursor: pointer;
    z-index: 100;
    transform: scale(1.1);
    border: 0.6rem solid $primary-light;
    background: $primary;
    box-shadow: 0 0 3rem $primary;
    animation: button-animation $transition-time ease-out;
    .text {
      bottom: 0;
      transition: bottom $transition-time/2 ease-out;
    }
  }
  &:focus {
    outline: none;
  }
  &:active {
    transform: scale(1);
  }
}

@keyframes button-animation {
  0% {
    box-shadow: 0 0 12rem $primary;
  }
  100% {
    box-shadow: 0 0 3rem $primary;
  }
}