$font: "Menlo", "Bitstream Vera Sans Mono", "DejaVu Sans Mono", "Monaco", "Consolas", monospace;
$speed: 0.2s;


.code-button {
  
  display: inline-block;
  font-family: $font;
  margin: 1em;
  background: #434d5a;
  border: none;
  padding: 1em 0;
  color: white;
  text-align: center;
  text-decoration: none;
  width: 9em;
  
  transition: 
    all $speed ease, 
    background-color $speed ease-in 0.15s, 
    box-shadow $speed ease-in 0.15s,
    color 0 ease;
  
  &__bracket,
  &__text,
  &__code {
    
    display: inline-block;
    margin-right: -3px;
    text-align: center;
    width: 0.5em;
    transition: 
      all $speed ease,
      color 0 ease;
    
  }
  
  &__bracket {
    
    font-weight: normal;
    
  }
  
  &__text {
    
    opacity: 0;
    position: absolute;
    transition: 
      all 0 ease;
    
  }
  
  &:hover {

    padding: 1em 0;

    transition:  
      all $speed ease, 
      background-color $speed ease-in 0.05s, 
      box-shadow $speed ease-in 0.05s,
      color 0 ease;
    
    .code-button {
      
      &__code,
      &__text {
        width: 2em;
      }
      
      &__code,
      &__text,
      &__bracket {
        
        transition: 
          all $speed ease, 
          color 0 ease;

      }
      
      &__code {
        opacity: 0;
        position: absolute;
      }
      
      &__text {
        opacity: 1;
        position: static;
      }
      
    }
    
  }
  
  &--color:hover {
  
    color: #434d5a;

    &.code-button--css {
      
      background-color: #AAFFA9;
      box-shadow:
          inset 15px 5px 70px -10px #AAFFA9,
          inset -15px -5px 70px -10px #11FFBD;

    }
    
    &.code-button--html {

      background-color: #fc8f71;
      box-shadow:
          inset 15px 15px 90px -20px #fc8f71,
          inset -15px -5px 80px -10px #fcdcab;

    }

    &.code-button--js {

      background-color: #87e1ed;
      box-shadow:
          inset 15px 15px 90px -20px #7996d1,
          inset -15px -5px 80px -10px #87e1ed;

    }
    
  }
  
}






body {
  
  text-align: center;
  padding: 10px;
  background: #FFFAF7;
  
}

h1 {
  
  color: darken(#434d5a,10%);
  font-family: "Fredoka One";
  text-transform: uppercase;
  font-size: 4em;
  line-height: 0.7em;
  
  small {
    
    opacity: 0.7;
    font-family: "Comfortaa";
    text-transform: none;
    font-size: 0.7em;
    line-height: 0.5em;
    
  }
  
}