h1 Open / Close button
h2 Pure CSS swagg
button#btn
-for (var x=0; x<3; x++)
span
View Compiled
body
background: hsl(0, 0, 92)
font-family: sans-serif
h1, h2
position: absolute
left: 50%
transform: translateX(-50%)
color: hsl(0, 0, 15)
font-weight: bold
text-transform: uppercase
letter-spacing: 2px
h1
top: 24px
font-size: 12px
h2
top: 44px
font-size: 10px
opacity: 0.7
$accent-color: hsl(0, 0, 50)
#btn
position: absolute
width: 80px
height: 80px
top: 50%
left: 50%
transform: translate(-50%, -50%)
cursor: pointer
background: hsl(0, 0, 100)
border-radius: 50%
border: none
outline: none
span
position: absolute
width: 50px
height: 4px
top: 50%
left: 50%
background: hsl(0, 0, 15)
border-radius: 2px
overflow: hidden
transition: all 0.3s linear
&::before
content: ''
position: absolute
width: 0
height: 100%
top: 0
right: 0
background: $accent-color
transition: all 0.3s linear
&:nth-child(1)
animation: span-first-off 0.5s ease-in-out
animation-fill-mode: forwards
&:nth-child(2)
animation: span-second-off 0.5s ease-in-out
animation-fill-mode: forwards
&:nth-child(3)
animation: span-third-off 0.5s ease-in-out
animation-fill-mode: forwards
#btn.on
&:hover span::before
width: 100%
transition: all 0.3s linear
span
&:nth-child(1)
animation: span-first-on 0.5s ease-in-out
animation-fill-mode: forwards
&:nth-child(2)
animation: span-second-on 0.5s ease-in-out
animation-fill-mode: forwards
&:nth-child(3)
animation: span-third-on 0.5s ease-in-out
animation-fill-mode: forwards
@keyframes span-first-on
0%
transform: translate(-50%, -300%)
30%
transform: translate(-50%, -50%)
100%
transform: translate(-50%, -50%) rotate(-45deg)
@keyframes span-first-off
0%
transform: translate(-50%, -50%) rotate(-45deg)
30%
transform: translate(-50%, -50%) rotate(0deg)
100%
transform: translate(-50%, -300%)
@keyframes span-second-on
0%
transform: translate(-50%, -50%)
25%
background: $accent-color
50%
transform: translate(-50%, -50%) scale(1)
100%
transform: translate(-150%, -50%) scale(0)
@keyframes span-second-off
0%
transform: translate(-150%, -50%) scale(0)
25%
background: $accent-color
50%
transform: translate(-50%, -50%) scale(1)
100%
transform: translate(-50%, -50%)
@keyframes span-third-on
0%
transform: translate(-50%, 200%)
30%
transform: translate(-50%, -50%)
100%
transform: translate(-50%, -50%) rotate(45deg)
@keyframes span-third-off
0%
transform: translate(-50%, -50%) rotate(45deg)
30%
transform: translate(-50%, -50%) rotate(0deg)
100%
transform: translate(-50%, 200%)
View Compiled
var e = document.getElementById('btn');
e.addEventListener('click', function() {
if (this.className == 'on') this.classList.remove('on');
else this.classList.add('on');
});
This Pen doesn't use any external JavaScript resources.