.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
  cursor pointer
  padding 1rem 1.25rem
  color #fff
  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 flow 2s infinite ease-in-out
  
  &:hover
    background 'hsl(%s, 100%, 40%)' % (var(--hue))
    animation shake .1s infinite ease-in-out
    
    ~ .button__shadow
      animation none
      
  &:active
    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%, 85%)
    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
  0%, 100%
    transform translate(0, 0)
  50%
    transform translate(0, -25%)
    
@keyframes shake
  0%, 100%
    transform translate(0, 0) rotate(0deg)
  25%
    transform translate(-1%, 3%) rotate(-2deg)
  50%
    transform translate(1%, 2%) rotate(2deg)
  75%
    transform translate(1%, -2%) rotate(-1deg)