- const colors = ['#0088FF', '#FFAA00', '#FF7700', '#FF0033', '#9911AA', '#AADD22']
.container
  - for (let b = 0; b < colors.length; b++)
    button(role='button' tabindex='0' style=`--buttonColor: ${colors[b]}`) Boo!
      span
      span
      span
      span
      b(aria-hidden='true') Boo!
      b(aria-hidden='true') Boo!
      b(aria-hidden='true') Boo!
      b(aria-hidden='true') 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)
  font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

.container
  display grid
  grid-template-columns 1fr 1fr
  grid-gap 20px

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)
    bottom calc(var(--borderWidth) * -1px)
    clip-path var(--clip)
    left calc(var(--borderWidth) * -1px)
    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%)
      z-index 2

    &:nth-of-type(1):hover ~ b:nth-of-type(1)
    &:nth-of-type(2):hover ~ b:nth-of-type(2)
    &:nth-of-type(3):hover ~ b:nth-of-type(3)
    &:nth-of-type(4):hover ~ b:nth-of-type(4)
        --clip inset(0 0 0 0)

    &:nth-of-type(1)
      --clip polygon(0 0, 100% 0, 50% 50%, 50% 50%)
    &:nth-of-type(2)
      --clip polygon(100% 0, 100% 100%, 50% 50%)
    &:nth-of-type(3)
      --clip polygon(0 100%, 100% 100%, 50% 50%)
    &:nth-of-type(4)
      --clip polygon(0 0, 0 100%, 50% 50%)

  b
    -webkit-clip-path var(--clip)
    background var(--buttonColor)
    border calc(var(--borderWidth) * 1px) solid var(--buttonColor)
    bottom calc(var(--borderWidth) * -1px)
    font-weight bold
    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

    &:nth-of-type(1)
      --clip inset(0 0 100% 0)
    &:nth-of-type(2)
      --clip inset(0 0 0 100%)
    &:nth-of-type(3)
      --clip inset(100% 0 0 0)
    &:nth-of-type(4)
      --clip inset(0 100% 0 0)

// NOT FOUND 🔍