Utilizing font variations on specific typefaces to create a cool hover effect.

// CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&display=swap');

html {
  margin: 150px 600px;
}

body {
  background-color: #1e1e1e;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 16px;
}

.button-group {
  display: flex;
  flex-direction: column;
}

.button {
  color: #eee;
  font-size: 6rem;
  
  transition:
    font-stretch 165ms cubic-bezier(0,.4,.2,1), 
    font-weight 165ms cubic-bezier(0,.4,.2,1), 
    color 165ms cubic-bezier(0,.4,.2,1);
  
  font-stretch: 60%;
  font-weight: 600;
  
  &:hover {
    font-stretch: 120%;
    font-weight: 800;
    color: #fae366;
    cursor: pointer;
  }
}