.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.