a.btn(href="#") Supah Awesome btn

$c: #474747;

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  padding: 1em 2em;
  border: .125em solid $c;
  box-shadow: .5em .5em 0 -.125em #FFF, .5em .5em lighten($c, 35%);
  overflow: hidden;
  position: relative;
  color: $c;
  font: 18px 'Space Mono';
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s;
  &:after {
    content: '';
    background: $c;
    width: 150%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: rotate(-45deg) translateY(-3em);
    transform-origin: 0% 100%;
    transition: .3s;
  }
  &:hover {
    color: #FFF;
    box-shadow: 1em 1em 0 -.125em #FFF, 1em 1em lighten($c, 35%);
    &:after {
      transform: rotate(0deg);
    }
  }
}