%button Yes, I'll take a hint!

@import compass

$color-background: #061b24
$color-green: #90ad53
$color-teal: #439976
$color-text: #d4cfc9

.stretch
  bottom: 0
  left: 0
  position: absolute
  right: 0
  top: 0

body
  background: $color-background
  font-family: "Lato", sans-serif
  font-size: 14px
  
button
  background: $color-teal
  +background-image(linear-gradient(left, $color-teal, $color-green))
  +border-radius(1.5em)
  +transition(opacity 300ms)
  border: none
  bottom: 0
  color: $color-text
  font-weight: bold
  height: 3em
  left: 0
  letter-spacing: 0.05em
  margin: auto
  outline: none
  overflow: hidden
  position: absolute
  right: 0
  top: 0
  width: 14em
  &:after
    @extend .stretch
    +box-shadow(rgba($color-text,0.75) 0 0 15px 2px)
    background: $color-text
    content: ''
    height: 2px
    opacity: 0
  &:before
    @extend .stretch
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat
    content: ''
    opacity: 0
  &:hover
    -webkit-animation: glitch 750ms infinite
    &:before
      opacity: 1
    &:after
      -webkit-animation: scan 2s infinite
      opacity: 1
  
  
@-webkit-keyframes glitch
  0%
    +transform(skewX(0deg))
  5%
    +transform(skewX(2deg))
    opacity: 0.75
  10%
    +transform(skewX(0deg))
    opacity: 1
  15%
    +transform(skewX(-5deg))
    opacity: 0.75
  20%
    +transform(skewX(0deg))
    opacity: 1
  45%
    +transform(skewX(3deg))
    opacity: 0.75
  50%
    +transform(skewX(0deg))
    opacity: 1
  55%
    +transform(skewX(0deg))
    opacity: 0.75
  60%
    +transform(skewX(0deg))
    opacity: 1
  75%
    +transform(skewX(2deg))
  80%
    +transform(skewX(0deg))
  85%
    +transform(skewX(-8deg))
    opacity: 0.75
  90%
    +transform(skewX(0deg))
    opacity: 1
  100%
    +transform(skewX(0deg))
    
@-webkit-keyframes scan
  0%
    top: 0%
  50%
    top: 97%
  100%
    top: 0%