input#morning.inp-cbx(type='checkbox')
label.cbx(for='morning')
span
svg(width='12px',height='10px')
use(xlink:href='#check')
span Morning
input#noon.inp-cbx(type='checkbox')
label.cbx(for='noon')
span
svg(width='12px',height='10px')
use(xlink:href='#check')
span Noon
input#afternoon.inp-cbx(type='checkbox')
label.cbx(for='afternoon')
span
svg(width='12px',height='10px')
use(xlink:href='#check')
span Afternoon
input#evening.inp-cbx(type='checkbox', style='display: none')
label.cbx(for='evening')
span
svg(width='12px',height='10px')
use(xlink:href='#check')
span Evening
//SVG Sprites
svg.inline-svg
symbol#check(viewbox='0 0 12 10')
polyline(points='1.5 6 4.5 9 10.5 1')
View Compiled
$primary = #0077FF
*
box-sizing: border-box
.cbx
-webkit-user-select: none
user-select: none
cursor: pointer
padding: 6px 8px
border-radius: 6px
overflow: hidden
transition: all .2s ease
&:not(:last-child)
margin-right: 6px
&:hover
background: rgba($primary,.06)
span
float: left
vertical-align: middle
transform: translate3d(0,0,0)
&:first-child
position: relative
width: 18px
height: 18px
border-radius: 4px
transform: scale(1)
border: 1px solid #CCCFDB
transition: all .2s ease
box-shadow: 0 1px 1px rgba(#00104B,.05)
svg
position: absolute
top: 3px
left: 2px
fill: none
stroke: #FFFFFF
stroke-width: 2
stroke-linecap: round
stroke-linejoin: round
stroke-dasharray: 16px
stroke-dashoffset: 16px
transition: all .3s ease
transition-delay: .1s
transform: translate3d(0,0,0)
&:last-child
padding-left: 8px
line-height: 18px
&:hover span:first-child
border-color: $primary
.inp-cbx
position: absolute
visibility: hidden
.inp-cbx:checked + .cbx
span
&:first-child
background: $primary
border-color: $primary
animation: wave .4s ease
svg
stroke-dashoffset: 0
@keyframes wave
50%
transform: scale(.9)
body
font-family: "Open Sans", sans-serif
font-size: 16px
-webkit-font-smoothing: antialiased
text-rendering: optimizelegibility
color: #223254
min-height: 100vh
display: flex
justify-content: center
align-items: center
.inline-svg
position: absolute
width: 0
height: 0
pointer-events: none
user-select: none
@media screen and (max-width: 640px)
body
width: auto
display: inherit
padding: 20px
.cbx
width: 100%
margin-bottom: 4px
display: inline-block
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.