animated-hamburger-icon-svg/dist/animated-menu-icon-svg.css

Self-contained, animating-between-states, SVG hamburger menu icon.

#animated-menu-icon-svg,#menu-icon-svg,#animated-menu-svg,#animated-menu-icon,#menu-icon,#menu-svg .animated-menu-icon-svg,.menu-icon-svg,.animated-menu-svg,.animated-menu-icon,.menu-icon,.menu-svg{position:relative;transition:all 80ms;user-select:none !important}#animated-menu-icon-svg *,#menu-icon-svg *,#animated-menu-svg *,#animated-menu-icon *,#menu-icon *,#menu-svg .animated-menu-icon-svg *,.menu-icon-svg *,.animated-menu-svg *,.animated-menu-icon *,.menu-icon *,.menu-svg *{transition:all 80ms}#animated-menu-icon-svg:active rect:first-of-type,#menu-icon-svg:active rect:first-of-type,#animated-menu-svg:active rect:first-of-type,#animated-menu-icon:active rect:first-of-type,#menu-icon:active rect:first-of-type,#menu-svg .animated-menu-icon-svg:active rect:first-of-type,.menu-icon-svg:active rect:first-of-type,.animated-menu-svg:active rect:first-of-type,.animated-menu-icon:active rect:first-of-type,.menu-icon:active rect:first-of-type,.menu-svg:active rect:first-of-type{transform:translatey(12px)}#animated-menu-icon-svg:active rect:last-of-type,#menu-icon-svg:active rect:last-of-type,#animated-menu-svg:active rect:last-of-type,#animated-menu-icon:active rect:last-of-type,#menu-icon:active rect:last-of-type,#menu-svg .animated-menu-icon-svg:active rect:last-of-type,.menu-icon-svg:active rect:last-of-type,.animated-menu-svg:active rect:last-of-type,.animated-menu-icon:active rect:last-of-type,.menu-icon:active rect:last-of-type,.menu-svg:active rect:last-of-type{transform:translatey(-12px)}.active#animated-menu-icon-svg,.active#menu-icon-svg,.active#animated-menu-svg,.active#animated-menu-icon,.active#menu-icon,#menu-svg .active.animated-menu-icon-svg,.active.menu-icon-svg,.active.animated-menu-svg,.active.animated-menu-icon,.active.menu-icon,.active.menu-svg{transform:translatey(1px)}.active#animated-menu-icon-svg rect:first-of-type,.active#menu-icon-svg rect:first-of-type,.active#animated-menu-svg rect:first-of-type,.active#animated-menu-icon rect:first-of-type,.active#menu-icon rect:first-of-type,#menu-svg .active.animated-menu-icon-svg rect:first-of-type,.active.menu-icon-svg rect:first-of-type,.active.animated-menu-svg rect:first-of-type,.active.animated-menu-icon rect:first-of-type,.active.menu-icon rect:first-of-type,.active.menu-svg rect:first-of-type,.active#animated-menu-icon-svg rect:last-of-type,.active#menu-icon-svg rect:last-of-type,.active#animated-menu-svg rect:last-of-type,.active#animated-menu-icon rect:last-of-type,.active#menu-icon rect:last-of-type,#menu-svg .active.animated-menu-icon-svg rect:last-of-type,.active.menu-icon-svg rect:last-of-type,.active.animated-menu-svg rect:last-of-type,.active.animated-menu-icon rect:last-of-type,.active.menu-icon rect:last-of-type,.active.menu-svg rect:last-of-type{transform-origin:center}.active#animated-menu-icon-svg rect:first-of-type,.active#menu-icon-svg rect:first-of-type,.active#animated-menu-svg rect:first-of-type,.active#animated-menu-icon rect:first-of-type,.active#menu-icon rect:first-of-type,#menu-svg .active.animated-menu-icon-svg rect:first-of-type,.active.menu-icon-svg rect:first-of-type,.active.animated-menu-svg rect:first-of-type,.active.animated-menu-icon rect:first-of-type,.active.menu-icon rect:first-of-type,.active.menu-svg rect:first-of-type{transform:translatey(8px) translatex(-7px) rotate(45deg)}.active#animated-menu-icon-svg rect:nth-of-type(2),.active#menu-icon-svg rect:nth-of-type(2),.active#animated-menu-svg rect:nth-of-type(2),.active#animated-menu-icon rect:nth-of-type(2),.active#menu-icon rect:nth-of-type(2),#menu-svg .active.animated-menu-icon-svg rect:nth-of-type(2),.active.menu-icon-svg rect:nth-of-type(2),.active.animated-menu-svg rect:nth-of-type(2),.active.animated-menu-icon rect:nth-of-type(2),.active.menu-icon rect:nth-of-type(2),.active.menu-svg rect:nth-of-type(2){display:none}.active#animated-menu-icon-svg rect:last-of-type,.active#menu-icon-svg rect:last-of-type,.active#animated-menu-svg rect:last-of-type,.active#animated-menu-icon rect:last-of-type,.active#menu-icon rect:last-of-type,#menu-svg .active.animated-menu-icon-svg rect:last-of-type,.active.menu-icon-svg rect:last-of-type,.active.animated-menu-svg rect:last-of-type,.active.animated-menu-icon rect:last-of-type,.active.menu-icon rect:last-of-type,.active.menu-svg rect:last-of-type{transform:translatey(-9px) translatex(-9px) rotate(-45deg)}.active#animated-menu-icon-svg:active rect:first-of-type,.active#menu-icon-svg:active rect:first-of-type,.active#animated-menu-svg:active rect:first-of-type,.active#animated-menu-icon:active rect:first-of-type,.active#menu-icon:active rect:first-of-type,#menu-svg .active.animated-menu-icon-svg:active rect:first-of-type,.active.menu-icon-svg:active rect:first-of-type,.active.animated-menu-svg:active rect:first-of-type,.active.animated-menu-icon:active rect:first-of-type,.active.menu-icon:active rect:first-of-type,.active.menu-svg:active rect:first-of-type{transform:translatey(12px) rotate(0)}.active#animated-menu-icon-svg:active rect:last-of-type,.active#menu-icon-svg:active rect:last-of-type,.active#animated-menu-svg:active rect:last-of-type,.active#animated-menu-icon:active rect:last-of-type,.active#menu-icon:active rect:last-of-type,#menu-svg .active.animated-menu-icon-svg:active rect:last-of-type,.active.menu-icon-svg:active rect:last-of-type,.active.animated-menu-svg:active rect:last-of-type,.active.animated-menu-icon:active rect:last-of-type,.active.menu-icon:active rect:last-of-type,.active.menu-svg:active rect:last-of-type{transform:translatey(-12px) rotate(0)}#menu-button{align-content:center;align-items:center;all:unset;appearance:none;background:#333333;border:none;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;height:48px;justify-content:center;line-height:1;padding:0;position:relative;text-align:center;transform:scale3d(1, 1, 1);transition:all 80ms;user-select:none !important;vertical-align:top;width:48px}#menu-button *{transition:all 120ms;user-select:none !important}#menu-button svg{bottom:4px;left:0;line-height:0;margin:auto;position:absolute;right:0;text-align:center;top:0;vertical-align:top}#menu-button svg rect{fill:#fff}#menu-button:active svg:active rect,#menu-button:active #animated-menu-icon-svg:active rect,#menu-button:active #menu-icon:active rect{transform:none}#menu-button:active svg rect:first-of-type,#menu-button:active #animated-menu-icon-svg rect:first-of-type,#menu-button:active #menu-icon rect:first-of-type{transform:translatey(12px)}#menu-button:active svg rect:last-of-type,#menu-button:active #animated-menu-icon-svg rect:last-of-type,#menu-button:active #menu-icon rect:last-of-type{transform:translatey(-12px)}#menu-button.active svg,#menu-button.active #animated-menu-icon-svg,#menu-button.active #menu-icon{transform:translatey(1px)}#menu-button.active svg rect:first-of-type,#menu-button.active svg rect:last-of-type,#menu-button.active #animated-menu-icon-svg rect:first-of-type,#menu-button.active #animated-menu-icon-svg rect:last-of-type,#menu-button.active #menu-icon rect:first-of-type,#menu-button.active #menu-icon rect:last-of-type{transform-origin:center}#menu-button.active svg rect:first-of-type,#menu-button.active #animated-menu-icon-svg rect:first-of-type,#menu-button.active #menu-icon rect:first-of-type{transform:translatey(8px) translatex(-7px) rotate(45deg)}#menu-button.active svg rect:nth-of-type(2),#menu-button.active #animated-menu-icon-svg rect:nth-of-type(2),#menu-button.active #menu-icon rect:nth-of-type(2){display:none}#menu-button.active svg rect:last-of-type,#menu-button.active #animated-menu-icon-svg rect:last-of-type,#menu-button.active #menu-icon rect:last-of-type{transform:translatey(-9px) translatex(-9px) rotate(-45deg)}#menu-button.active:active svg rect:first-of-type,#menu-button.active:active #animated-menu-icon-svg rect:first-of-type,#menu-button.active:active #menu-icon rect:first-of-type{transform:translatey(12px) rotate(0)}#menu-button.active:active svg rect:last-of-type,#menu-button.active:active #animated-menu-icon-svg rect:last-of-type,#menu-button.active:active #menu-icon rect:last-of-type{transform:translatey(-12px) rotate(0)}#menu-button:hover{background:#222222}#menu-button:hover svg rect{fill:#e6e6e6}#menu-button:focus{background:#111111;box-shadow:0 0 0 3px rgba(123,104,238,0.35);outline:none}#menu-button:focus rect{fill:aliceblue}#menu-button:active{background:#000000;transform:scale3d(0.95, 0.95, 1)}#menu-button:active svg rect{fill:#bfbfbf}svg:focus{background:mediumslateblue}