Navicon Transformicons

Animated Navigation Icons with CSS3 Transforms

Click on the icons to see them transforming.

Download Code

HTML- / jquery Code

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Transformicons: Animated Navigation Icons with CSS3</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">


<script type="text/javascript" src="http://www.roginnovation.com/jquery/jquery-2.1.3.min.js"></script>
</head>

<body>

<section role="main">

<h1>Navicon Transformicons</h1>
<h2>Animated Navigation Icons with CSS3 Transforms</h2>
<p>Click on the icons to see them transforming.</p>

<div class="buttons-container">
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button arrow arrow-left">
<span class="lines"></span>
</button>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button arrow arrow-up">
<span class="lines"></span>
</button>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button minus">
<span class="lines"></span>
</button>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x">
<span class="lines"></span>
</button>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x2">
<span class="lines"></span>
</button>
<button type="button" role="button" aria-label="Toggle Navigation" class="grid-button rearrange">
<span class="grid"></span>
</button>
<button type="button" role="button" aria-label="Toggle Navigation" class="grid-button collapse">
<span class="grid"></span>
</button>
</div>
</section>

<script>
var anchor = document.querySelectorAll('button');

[].forEach.call(anchor, function(anchor){
var open = false;
anchor.onclick = function(event){
event.preventDefault();
if(!open){
this.classList.add('close');
open = true;
}
else{
this.classList.remove('close');
open = false;
}
}
});
</script>

</body>
</html>

CSS Code

html, body {
height: 100%; }

body {
background-color: #12171A;
color: #516774;
border: 1px solid transparent;
font-family: "Source Sans pro", sans-serif; }

a {
color: white;
text-decoration: none; }

a:hover {
color: inherit; }

h1 {
font-size: 5em;
font-weight: normal;
text-align: center;
margin: 100px auto 30px;
font-weight: 300; }

h2 {
font-size: 2.2em;
text-align: center;
font-weight: 300; }

p {
text-align: center; }

.buttons-container {
margin: 100px auto;
text-align: center; }

button {
display: inline-block;
margin: 0 1em;
border: none;
background: none; }
button span {
display: block;
}

.grid-button {
padding: 2rem;
cursor: pointer;
user-select: none; }

.grid-button .grid {
width: 1rem;
height: 1rem;
background: #ecf0f1;
color: #ecf0f1;
/* Not in use when the colors are specified below */
transition: 0.3s; }

.grid-button.close .grid {
-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8); }

.grid-button.rearrange .grid {
box-shadow: -1.25rem -1.25rem, 0 -1.25rem, 1.25rem -1.25rem, -1.25rem 0, 1.25rem 0, -1.25rem 1.25rem, 0 1.25rem, 1.25rem 1.25rem; }

.grid-button.rearrange.close .grid {
box-shadow: 0 -1rem, 0 -2rem, 1rem 0, -2rem 0, 2rem 0, -1rem 0, 0 2rem, 0 1rem; }

.grid-button.collapse .grid {
box-shadow: -1.25rem 0, -1.25rem 1.25rem, 1.25rem 0, 1.25rem -1.25rem, 0 -1.25rem, -1.25rem -1.25rem, 0 1.25rem, 1.25rem 1.25rem; }

.grid-button.collapse.close .grid {
box-shadow: -1rem 0, 0 0 transparent, 1rem 0, 0 0 transparent, 0 -1rem, 0 0 transparent, 0 1rem, 0 0 transparent; }

/* ====================== lines button ==================================================*/
.lines-button {
padding: 2rem 1rem;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: 0.57143rem; }

.lines-button:hover {
opacity: 1;
}

.lines-button:active {
transition: 0; }

.lines {
display: inline-block;
width: 4rem;
height: 0.57143rem;
background: #ecf0f1;
border-radius: 0.28571rem;
transition: 0.3s;
position: relative; }

.lines:before, .lines:after {
display: inline-block;
width: 4rem;
height: 0.57143rem;
background: #ecf0f1;
border-radius: 0.28571rem;
transition: 0.3s;
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: 0.28571rem center;
transform-origin: 0.28571rem center;
}

.lines:before {
top: 1rem; }

.lines:after {
top: -1rem; }

.lines-button:hover .lines:before {
top: 1.14286rem; }

.lines-button:hover .lines:after {
top: -1.14286rem; }

.lines-button.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8); }

.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after {
top: 0;
width: 2.22222rem; }

.lines-button.arrow.close .lines:before {
-webkit-transform: rotate3d(0, 0, 1, 40deg);
transform: rotate3d(0, 0, 1, 40deg); }

.lines-button.arrow.close .lines:after {
-webkit-transform: rotate3d(0, 0, 1, -40deg);
transform: rotate3d(0, 0, 1, -40deg); }

.lines-button.arrow-up.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 90deg);
transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 90deg); }

.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after {
-webkit-transform: none;
transform: none;
top: 0;
width: 4rem; }

.lines-button.x.close .lines {
background: transparent; }

.lines-button.x.close .lines:before, .lines-button.x.close .lines:after {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
top: 0;
width: 4rem; }

.lines-button.x.close .lines:before {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg); }

.lines-button.x.close .lines:after {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg); }

.lines-button.x2 .lines {
transition: background 0.3s 0.5s ease; }

.lines-button.x2 .lines:before, .lines-button.x2 .lines:after {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: top 0.3s 0.6s ease, -webkit-transform 0.3s ease;
transition: top 0.3s 0.6s ease, transform 0.3s ease; }

.lines-button.x2.close .lines {
transition: background 0.3s 0s ease;
background: transparent; }

.lines-button.x2.close .lines:before, .lines-button.x2.close .lines:after {
transition: top 0.3s ease, -webkit-transform 0.3s 0.5s ease;
transition: top 0.3s ease, transform 0.3s 0.5s ease;
top: 0;
width: 4rem; }

.lines-button.x2.close .lines:before {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg); }

.lines-button.x2.close .lines:after {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg); }

This project "Demo for Navicon Transformicons: Animated Navigation Icons with CSS Transforms" is licensed under MIT.
Code originally by [@bennettfeely](http://twitter.com/bennettfeely),