.container
  .button Hover Me
    .drops
View Compiled
html
  width: 100%
  height: 100%
  body
    width: 100%
    height: 100%
    margin: 0
    background: #CDE7B0
    
.container
  position: absolute
  top: 50%
  left: 50%
  margin: -50px 0 0 -100px
  .button
    width: 200px
    text-align: center
    background: #A3BFA8
    padding: 20px
    box-sizing: border-box
    color: white
    border: 4px solid #7286A0
    border-radius: 8px
    font-family: sans-serif
    font-weight: bold
    cursor: pointer
    &:after
      content: ''
      display: block
      position: absolute
      z-index: -1
      top: 20px
      right: 0
      width: 100px
      height: 20px
      background: #7286A0
      border-radius: 50px
      
      
    &:before
      content: ''
      display: block
      position: absolute
      z-index: -1
      top: 0
      right: 0
      width: 100px
      height: 20px
      background: #7286A0
      border-radius: 50px

      
    
    .drops
      content: ''
      display: block
      position: absolute
      z-index: -1
      top: 22px
      left: 40px
      width: 15px
      height: 15px
      background: #7286A0
      border-radius: 50px
      transition: .2s
      
        
.button:hover 
  
  .drops
    animation: ooze-drop 1.5s ease-in-out forwards
.button:hover
  &:after
    animation: ooze-mid 1s ease-in-out forwards
.button:hover
  &:before
    animation: ooze-top .8s ease-in-out forwards
      
      
@keyframes ooze-top
  0%
    width: 100px
  100%
    width: 230px
@keyframes ooze-mid
  0%
    width: 100px
  100%
    width: 220px
  
@keyframes ooze-drop
  0%
    transform: translateX(0px)
  100%
    transform: translateX(-80px)
      
      
    
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.