$c1: #e5e5e5;
$c2: #404040;
$c3: #ff6b40;

html { background-color: #edecec; }

p {
  margin: 10em auto;
  text-align: center;
}

a {
  background: {
    image: linear-gradient($c3,$c3);
    position: 0 4rem;
    size: 4px 4px;
    repeat: repeat-x;
  }
  color: $c2;
  font: {
    family: 'Righteous', serif;
    size: 3.375em;
    weight: 400;
  }
  padding: 0.25rem;
  text: {
    decoration: none;
    transform: uppercase;
  }
  transition: all 250ms ease-out;
  
  &:hover,&:focus {
    background: {
      image: 
        linear-gradient(to top,
          $c3,
          $c3 7%,
          lighten($c3,5%) 7%,
          lighten($c3,5%)
        );
      position: 0 0;
      size: 100% 100%;
    }
    border-radius: 7px;
    color: #fefefe;
    padding: 0.25rem 0.75rem;
  }
  
  &:active {
    background-image:
      linear-gradient(to bottom,
        darken($c3,7%),
        darken($c3,7%) 7%,
        $c3 7%,
        $c3
      );
    border-radius: 7px;
  }
}