.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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.