button Boo!
  span Boo!

*
*:after
*:before
  box-sizing border-box
  
:root
  --bg #fafafa
  
body
  align-items center
  background var(--bg)
  color var(--bg)
  display flex
  justify-content center
  min-height 100vh
  
button
  --borderWidth 5
  --boxShadowDepth 8
  --buttonColor red
  --fontSize 3
  --horizontalPadding 16
  --verticalPadding 8
  background transparent
  border calc(var(--borderWidth) * 1px) solid var(--buttonColor)
  box-shadow calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888
  color var(--buttonColor)
  cursor pointer
  font-size calc(var(--fontSize) * 1rem)
  font-weight bold
  outline transparent
  padding calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px)
  position relative
  transition box-shadow .15s ease
  
  span
    --clip inset(0 100% 0 0)
    -webkit-clip-path var(--clip)
    background var(--buttonColor)
    border calc(var(--borderWidth) * 1px) solid var(--buttonColor)
    bottom calc(var(--borderWidth) * -1px)
    clip-path var(--clip)
    color var(--bg, #fafafa)
    left calc(var(--borderWidth) * -1px)
    padding calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px)
    position absolute
    right calc(var(--borderWidth) * -1px)
    top calc(var(--borderWidth) * -1px)
    transition clip-path .25s ease
    
  &:hover
    span
      --clip inset(0 0 0 0)

  &:hover
    box-shadow calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888
    
  &:active
    box-shadow 0 0 0 #888