Menu Hamburguesa

by Slee

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Botòn de Menù animado con css</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <input type="checkbox" id="btn-menu">
    <label for="btn-menu" class="lbl-menu">
        <span id="spn1"></span>
        <span id="spn2"></span>
        <span id="spn3"></span>
    </label>
</body>
</html>

CSS

*{margin: 0;padding: 0;box-sizing: border-box;}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
	  background-color:#1c1c1c;
}
.lbl-menu{
    width: 40px;
    height: 30px;
    position: relative;
    cursor: pointer;
	transform: scale(1.2);
}
.lbl-menu #spn1,#spn2,#spn3{
    position: absolute;
    content: '';
    background:#ffff;
    width: 40px;
    height: 5px;
    border-radius: 5px;
    transition: all 400ms ease;
}
#spn2{
    top: 12px;
}
#spn3{
    top: 23px;
}
#btn-menu{
    display: none;
}
#btn-menu:checked ~ .lbl-menu #spn1{
    transform: rotate(140deg);
    top: 10px;
}
#btn-menu:checked ~ .lbl-menu #spn2{
    opacity: 0;
}
#btn-menu:checked ~ .lbl-menu #spn3{
    transform: rotate(-140deg);
    top: 10px;
}