.button__wrap
  button.button(style=`--hue: ${Math.random() * 360}`) Show me attention
  .button__shadow

body
  min-height 100vh
  display flex
  align-items center
  justify-content center
  
.button
  --y -25
  --x 0
  --rotation 0
  --speed 2
  --txt "Show me attention"
  --padding 1rem 1.25rem
  cursor pointer
  padding var(--padding)
  color transparent
  font-weight bold
  font-size 1.25rem
  transition background .1s ease
  background 'hsl(%s, 100%, 50%)' % (var(--hue))
  outline-color 'hsl(%s, 100%, 80%)' % (var(--hue))
  animation-name flow-and-shake
  animation-duration calc(var(--speed) * 1s)
  animation-iteration-count infinite
  animation-timing-function ease-in-out
  
  &:after
    content var(--txt)
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    padding var(--padding)
    color #fff
  
  &:hover
    background 'hsl(%s, 100%, 40%)' % (var(--hue))
    --speed .1
    --rotation -1
    --y -1
    --x 1
    --txt "Click me!"
      
  &:active
    --speed 4
    --x 0
    --y 5
    --rotation 0
    --txt "Ahhhh..."
    background 'hsl(%s, 100%, 30%)' % (var(--hue))

    
  &__wrap
    position relative
    
  &__shadow
    position absolute
    border-radius 100%
    bottom 0
    left 0
    right 0
    height 4px
    background hsl(0, 10%, 65%)
    animation shadow 2s infinite ease-in-out
    z-index -1
  

@keyframes shadow
  0%, 100%
    transform scaleX(1)
    opacity 1
  50%
    opacity .2
    transform scaleX(.25)

@keyframes flow-and-shake
  0%, 100%
    transform translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg))
  50%
    transform translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg))