L’effet wahou à Noêl, c’est tout ce qu’on aime !

Alors voici un icon hamburger très chouette qui se transforme en croix, tout en css !

Icon hamburger en css

 

Maintenant c’est à toi de t’en servir et de le rendre utile ! Moi je t’ai juste montré la transformation 😉

Le html :


<div class="open-burger">
   <span class="line line-1"></span>
   <span class="line line-2"></span>
   <span class="line line-3"></span>
</div>


Et le css :


.open-burger {
    width: 25px;
    outline: none;
    height: 20px;
    display: block;
    left: 0;
    top: 0;
    margin: 15px 0 0 13px;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    text-align: center;
    border-radius: 4px;
}
.open-burger .line.line-1 {
    top: 0;
}
.open-burger .line.line-2 {
    top: 50%;
}
.open-burger .line.line-3 {
    top: 100%;
}
.open-burger .line {
    display: block;
    background: #222222;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    top: 10px;
    border-radius: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
.open-burger:hover .line-1 {
    transform: translateY(8px) translateX(0) rotate(45deg);
    -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
    -moz-transform: translateY(8px) translateX(0) rotate(45deg);
}
.open-burger:hover .line-2 {
    opacity: 0;
}
.open-burger:hover .line-3 {
    transform: translateY(-12px) translateX(0) rotate(-45deg);
    -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
    -moz-transform: translateY(-12px) translateX(0) rotate(-45deg);
}