.content.l-flexV--c
p
button#btn.b-menu
button#jsBtn.b-menu
label(for="btn") click
View Compiled
body
background-color #000
color #fff
.content
position fixed
top 0
left 0
width 100%
height 100%
.l-flexV--c
display flex
flex-flow column nowrap
align-items center
justify-content center
button
border none
outline none
box-shadow none
background none
color currentColor
padding 0
cursor pointer
.b-menu
width 25px
height 25px
position relative
&:before,
&:after
content ' '
position absolute
background-color #fff
display block
width 100%
height 3px
left 0
top 11px
border-radius 3px
transition all .5s
transform-origin 50% 50%
&:before
transform translateY(-6px)
&:after
box-shadow 0 6px 0 0 #fff
&:focus:before
transform rotateZ(45deg) translateY(0)
&:focus:after
box-shadow 0 0 0 0 #fff
transform rotateZ(135deg) translateY(0)
View Compiled
let btn = document.querySelector('#jsBtn')
let status = true
let focus = function () {
setTimeout(() => {
btn.focus()
// status && blur()
}, 2000)
}
let blur = function () {
setTimeout(() => {
btn.blur()
status && focus()
}, 2000)
}
focus()
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.