button(style='--content: "Boo!"') Boo!

*
*: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
  // Attach the CSS variable to the button not the pseudo element!
  --clip inset(0 100% 0 0)
  --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

  
  &:after
    content var(--content)
    position absolute
    top calc(var(--borderWidth) * -1px)
    right calc(var(--borderWidth) * -1px)
    bottom calc(var(--borderWidth) * -1px)
    left calc(var(--borderWidth) * -1px)
    border calc(var(--borderWidth) * 1px) solid var(--buttonColor)
    padding calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px)
    -webkit-clip-path var(--clip)
    clip-path var(--clip)
    color var(--bg, #fafafa)
    background var(--buttonColor)
    transition clip-path .25s ease
    
  &:hover
    --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