button Boo!
  span
  span
  span
  span

*
*:after
*:before
  box-sizing border-box
  
:root
  --bg #fafafa
  
body
  display flex
  align-items center
  justify-content center
  min-height 100vh
  background var(--bg)
  color var(--bg)
  
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

  &:hover
    box-shadow calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888
    
  &:active
    box-shadow 0 0 0 #888
    
  span
    -webkit-clip-path var(--clip)
    background var(--bg)
    bottom calc(var(--borderWidth) * -1px)
    clip-path var(--clip)
    left calc(var(--borderWidth) * -1px)
    opacity 0.5
    position absolute
    right calc(var(--borderWidth) * -1px)
    top calc(var(--borderWidth) * -1px)
    z-index 1

    &:nth-of-type(1):hover
    &:nth-of-type(2):hover
    &:nth-of-type(3):hover
    &:nth-of-type(4):hover      
      --clip polygon(0 0, 100% 0, 100% 100%, 0 100%)
      opacity 1
      z-index 2
    
    &:nth-of-type(1)
      --bg blue
      --clip polygon(0 0, 100% 0, 50% 50%, 50% 50%)
    &:nth-of-type(2)
      --bg red
      --clip polygon(100% 0, 100% 100%, 50% 50%)
    &:nth-of-type(3)
      --bg green
      --clip polygon(0 100%, 100% 100%, 50% 50%)
    &:nth-of-type(4)
       --bg purple
      --clip polygon(0 0, 0 100%, 50% 50%)