Scroll down to discover different ways to do it
<span id="x"></span>span {
display: block;
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 0px;
margin: 15% auto;
-webkit-transition: all .3s ease, -webkit-transform .2s ease;
transition: all .3s ease, transform .2s ease;
background: -webkit-linear-gradient(top, transparent 0%, transparent 20%, #2E313C 20%, #2E313C 23%, transparent 23%, transparent 48%, #2E313C 48%, #2E313C 50%, transparent 47%, transparent 76%, #2E313C 76%, #2E313C 78%, transparent 78%), -webkit-linear-gradient(transparent, transparent);
background: linear-gradient(to bottom, transparent 0%, transparent 20%, #2E313C 20%, #2E313C 23%, transparent 23%, transparent 48%, #2E313C 48%, #2E313C 50%, transparent 47%, transparent 76%, #2E313C 76%, #2E313C 78%, transparent 78%), linear-gradient(transparent, transparent);
}
span:active, span:hover {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
span.clicked {
background: -webkit-linear-gradient(135deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%);
background: linear-gradient(-45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
span.clicked:active, span.clicked:hover {
-webkit-transform: scale(0.9) rotate(180deg);
-ms-transform: scale(0.9) rotate(180deg);
transform: scale(0.9) rotate(180deg);
}
document.getElementById('x').addEventListener('click', function () {
if (this.classList.contains('clicked')) {
this.classList.remove('clicked');
} else {
this.classList.add('clicked');
}
});<svg width="100" height="100">
<g id="cross_svg">
<rect id="Rectangle-1" x="0" y="0" width="48" height="2" fill="transparent"></rect>
<rect id="Rectangle-2" x="0" y="14" width="48" height="2" fill="transparent"></rect>
<rect id="Rectangle-4" x="0" y="28" width="48" height="2" fill="transparent"></rect>
</g>
</svg> svg {
width: 52px;
height: 52px;
z-index: 99999;
transition: all .3s ease;
display: block;
margin: 15% auto;
cursor: pointer;
}
svg g {
transition: all .3s ease;
width: 100px;
height: 100px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: auto;
cursor: pointer;
}
svg rect {
transition: all .3s ease;
fill: #E04681;
}
svg g {
width: 100px;
height: 100px;
}
$(document).ready(function(){
var svg = $('svg');
var lines = svg.find('rect');
var line_first = $('svg rect:nth-child(1)')
var line_second = $('svg rect:nth-child(2)')
var line_third = $('svg rect:nth-child(3)')
var i = true;
svg.on('click', function(){
if (i) {
setTimeout(function(){
$(this).find("g").addClass('gotcha')
line_first.css({
'transform':'rotate(45deg)',
'left':'50%',
'top':'50%',
'width':'200px',
// This line BELONGS to @dervondenbergen :D
// Enjoy your propriety my friend.
'transform-origin': 'left bottom'
})
line_third.css({
'transform':'rotate(-45deg) translate(-50%,-50%)',
'left':'50%',
'top':'50%'
})
line_second.css('opacity','0')
},005)
} else {
setTimeout(function(){
line_first.attr('style', '');
line_third.attr('style', '');
line_second.css('opacity','1')
},005)
}
i=!i;
});
});<input type="checkbox" id="toggle-menu"/>
<label for="toggle-menu">
<span class="menu-icon"></span>
</label>@charset "UTF-8";
.menu-icon {
font-size: 3em;
max-width: 45px;
text-align: center;
display: block;
margin: 15% auto;
cursor: pointer;
transition: transform .2s ease;
}
.menu-icon:hover {
transform: scale(0.9);
}
.menu-icon:before, .menu-icon:after {
line-height: .5;
}
.menu-icon:before {
content: '☰';
display: block;
}
.menu-icon:after {
content: '╳';
font-size: .75em;
font-weight: 800;
display: none;
}
#toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon {
transform: rotate(180deg);
}
#toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon:before {
display: none;
}
#toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon:after {
display: block;
}
// No JS<span></span>span {
margin: 15% auto;
display: block;
width: 45px;
height: 45px;
position: relative;
display: block;
width: 1.5em;
height: 0.25em;
background: #E04681;
border-radius: 3px;
cursor: pointer;
transition: transform .2s ease;
}
span:before, span:after {
border-radius: 3px;
transition: transform .3s ease;
}
span:before {
content: '';
display: block;
position: absolute;
width: 1.5em;
height: 0.25em;
top: -0.5em;
background: #E04681;
}
span:after {
content: '';
display: block;
position: absolute;
width: 1.5em;
height: 0.25em;
top: 0.5em;
background: #E04681;
}
span.close {
width: 45px;
height: 45px;
margin: 15% auto;
left: 10px;
position: relative;
display: block;
width: 0;
height: 0;
background: transparent;
transform: rotate(-180deg);
}
span.close:before, span.close:after {
transition: transform .3s ease;
}
span.close:before {
content: '';
display: block;
position: absolute;
width: 1.5em;
height: 0.25em;
top: 0;
background: #E04681;
transform: rotate(-45deg);
}
span.close:after {
content: '';
display: block;
position: absolute;
width: 1.5em;
height: 0.25em;
top: 0;
background: #E04681;
transform: rotate(45deg);
}
var $icon = $('span');
$icon.on('click',function(e){
$(this).toggleClass('close')
});<div class="menu">
<div class="bit-1"></div>
<div class="bit-2"></div>
<div class="bit-3"></div>
</div>.menu {
width: 3em;
height: 3em;
position: relative;
z-index: 0;
margin: 15% auto;
}
.menu .bit-1::before {
content: '';
left: 0.5em;
top: 0.5em;
position: absolute;
width: 1em;
transform-origin: left bottom;
height: 0.3em;
background: #2E313C;
transition: transform 0.3s, top 0.3s;
}
.menu .bit-1::after {
content: '';
position: absolute;
right: 0.5em;
top: 0.5em;
width: 1em;
transform-origin: right bottom;
height: 0.3em;
background: #2E313C;
transition: transform 0.3s, top 0.3s;
}
.menu .bit-2 {
position: absolute;
width: 2em;
top: 50%;
left: 50%;
height: 0.3em;
background: #2E313C;
transform: translate(-50%, -50%);
transition: transform 0.3s 0.3s, width 0.3s 0.6s;
}
.menu .bit-3::before {
content: '';
position: absolute;
bottom: 0.5em;
left: 0.5em;
width: 1em;
transform-origin: left top;
height: 0.3em;
background: #2E313C;
transition: transform 0.3s, bottom 0.3s;
}
.menu .bit-3::after {
content: '';
position: absolute;
bottom: 0.5em;
right: 0.5em;
width: 1em;
transform-origin: right top;
height: 0.3em;
background: #2E313C;
transition: transform 0.3s, bottom 0.3s;
}
.menu.open .bit-1:before {
top: 0.4em;
width: 1.2em;
transform: rotate(45deg);
transform-origin: left bottom;
transition: transform 0.3s 0.3s, width 0.3s 0.3s, top 0.3s 0.3s;
}
.menu.open .bit-1:after {
top: 0.4em;
width: 1.2em;
transform: rotate(-45deg);
transform-origin: right bottom;
transition: transform 0.3s 0.3s, width 0.3s 0.3s, top 0.3s 0.3s;
}
.menu.open .bit-2 {
width: 0.3em;
transform: translate(-50%, -50%) rotate(45deg);
transition: transform 0.3s 0.3s, width 0.3s;
}
.menu.open .bit-3:before {
bottom: 0.4em;
width: 1.2em;
transform: rotate(-45deg);
transform-origin: left top;
transition: transform 0.3s 0.3s, width 0.3s 0.3s, bottom 0.3s 0.3s;
}
.menu.open .bit-3:after {
bottom: 0.4em;
width: 1.2em;
transform: rotate(45deg);
transform-origin: right top;
transition: transform 0.3s 0.3s, width 0.3s 0.3s, bottom 0.3s 0.3s;
}
var menu = document.querySelector('.menu');
function toggleMenu () {
menu.classList.toggle('open');
}
menu.addEventListener('click', toggleMenu);
<span></span>@import url(http://weloveiconfonts.com/api/?family=entypo);
span {
font-family: "entypo", sans-serif;
font-size: 2em;
display: block;
margin: 15% auto;
width: 45px;
transition: transform .3s ease;
transform-origin: 25% 50%;
}
span:before {
content: "\2630";
}
span.close {
transform: rotate(-180deg);
}
span.close:before {
content: "\2715";
}
var menuSecond = document.querySelector('span');
function toggleMenuSecond () {
menuSecond.classList.toggle('close');
}
menuSecond.addEventListener('click', toggleMenuSecond);