Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<input type="checkbox" id="check"/>
<label for="check" class="icon">
<div class="s-line"></div>
<div class="l-line"></div>
<div class="d-line top"></div>
<div class="d-line bottom"></div>
<div class="s-line"></div>
</label>
/*
* Pure CSS!
*
* Just because Yair Even Or (@vsync) says that Javascript is Odd
*
*/
body {
background: #563C82;
}
input {
display: none;
}
.icon {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
width: 170px;
height: 80px;
margin: auto;
cursor: pointer;
div {
position: absolute;
height: 17px;
border-radius: 100px;
background: #FFF;
transition: all 0.5s ease;
}
}
.s-line {
right: 0;
width: 100px;
&:first-child {
top: 0px;
}
&:last-child {
bottom: 0px;
}
}
.l-line {
top: 0;
right: 0;
bottom: 0;
width: 170px;
margin: auto;
}
.d-line {
left: -8px;
width: 62px;
margin: auto;
&.top {
top: 15.5px;
transform: rotate(-45deg);
}
&.bottom {
bottom: 15.5px;
transform: rotate(45deg);
}
}
#check:checked {
+ label {
div:not(.d-line) {
width: 0;
}
.d-line {
width: 100px;
&.top {
transform: translate(40px, 17px) rotate(-45deg);
}
&.bottom {
transform: translate(40px, -15px) rotate(45deg);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment