.cbx
input#cbx(type='checkbox')
label(for='cbx')
svg(width='15' height='14' viewbox='0 0 15 14' fill='none')
path(d='M2 8.36364L6.23077 12L13 2')
// Gooey
svg(xmlns='http://www.w3.org/2000/svg' version='1.1')
defs
filter#goo
fegaussianblur(in='SourceGraphic' stddeviation='4' result='blur')
fecolormatrix(in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -7' result='goo')
feblend(in='SourceGraphic' in2='goo')
View Compiled
$primary = #4C95F7
*
box-sizing: border-box
input[type="checkbox"]
-webkit-appearance: none
-moz-appearance: none
appearance: none
-webkit-tap-highlight-color: transparent
cursor: pointer
margin: 0
&:focus
outline: 0
.cbx
position: absolute
width: 24px
height: 24px
top: calc(50vh - 12px)
left: calc(50vw - 12px)
input
position: absolute
top: 0
left: 0
width: 24px
height: 24px
border: 2px solid #bfbfc0
border-radius: 50%
transition: all .2s ease
&:hover
border-color: darken(#bfbfc0,8%)
label
width: 24px
height: 24px
background: none
border-radius: 50%
position: absolute
top: 0
left: 0
-webkit-filter: url(#goo)
filter: url(#goo)
transform: trasnlate3d(0,0,0)
pointer-events: none
svg
position: absolute
top: 5px
left: 4px
z-index: 1
pointer-events: none
path
stroke: white
stroke-width: 3
stroke-linecap: round
stroke-linejoin: round
stroke-dasharray: 19
stroke-dashoffset: 19
transition: all .4s ease
input:checked
+ label
animation: splash .6s ease forwards
+ svg path
stroke-dashoffset: 0
@keyframes splash
0%
transform: scale(1.1)
40%
transform: scale(1)
background: $primary
box-shadow: 0 -18px 0 -8px $primary, 16px -8px 0 -8px $primary, 16px 8px 0 -8px $primary, 0 18px 0 -8px $primary, -16px 8px 0 -8px $primary, -16px -8px 0 -8px $primary
100%
background: $primary
box-shadow: 0 -32px 0 -10px transparent, 28px -16px 0 -10px transparent, 28px 16px 0 -10px transparent, 0 32px 0 -10px transparent, -28px 16px 0 -10px transparent, -28px -16px 0 -10px transparent
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.