20 CSS Hamburger Menus 11 / 20

Minimalist 3-Line CSS Menu Icon with Hover Effects

A gallery of six pure-CSS hover micro-interactions — stretch, converge, color-shift cascade, tilt, squash, grow — using transitions and transforms on a tidy card grid.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="chm-11">
  <div class="chm-11__scene">
    <div class="chm-11__bg"></div>
    <div class="chm-11__stage">
      <div class="chm-11__intro">
        <h1>Hover the icons.</h1>
        <p>six micro-interactions · pure css</p>
      </div>
      <div class="chm-11__row">
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__stretch"><span></span><span></span><span></span></div><div class="chm-11__name">stretch</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__converge"><span></span><span></span><span></span></div><div class="chm-11__name">converge</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__cascade"><span></span><span></span><span></span></div><div class="chm-11__name">color shift</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__tilt"><span></span><span></span><span></span></div><div class="chm-11__name">tilt</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__bounce"><span></span><span></span><span></span></div><div class="chm-11__name">squash</div></div>
        <div class="chm-11__cell"><div class="chm-11__ic chm-11__grow"><span></span><span></span><span></span></div><div class="chm-11__name">grow</div></div>
      </div>
    </div>
    <div class="chm-11__tag">HOVER_ICONS // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;700&family=Major+Mono+Display&display=swap');
.chm-11, .chm-11 *, .chm-11 *::before, .chm-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-11{
  --bg:#f6f4ef;--ink:#171514;--red:#e23b2e;--blue:#2b4cf0;--ground:#dcd7cc;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Hanken Grotesk',sans-serif;background:var(--bg);color:var(--ink);
  position:relative;
}
.chm-11__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-11__bg{position:absolute;inset:0;background-image:radial-gradient(rgba(23,21,20,.06) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 85%);mask-image:radial-gradient(circle at 50% 50%,#000,transparent 85%)}
.chm-11__stage{position:relative;z-index:2;min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.chm-11__intro{text-align:center;margin-bottom:18px}
.chm-11__intro h1{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:700;letter-spacing:-.02em}
.chm-11__intro p{font-family:'Major Mono Display',monospace;margin-top:8px;font-size:10px;letter-spacing:.2em;color:#777}
.chm-11__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:680px}
.chm-11__cell{width:130px;background:#fff;border:1px solid var(--ground);border-radius:16px;padding:22px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 6px 20px rgba(23,21,20,.04)}
.chm-11__name{font-family:'Major Mono Display',monospace;font-size:9px;letter-spacing:.15em;color:#999}
.chm-11__ic{width:38px;height:28px;position:relative;cursor:pointer}
.chm-11__ic span{position:absolute;left:0;height:3px;width:100%;background:var(--ink);border-radius:4px;transition:all .35s ease}
.chm-11__ic span:nth-child(1){top:2px}.chm-11__ic span:nth-child(2){top:12px}.chm-11__ic span:nth-child(3){top:22px}
.chm-11__stretch:hover span:nth-child(1){width:60%}
.chm-11__stretch:hover span:nth-child(2){width:100%}
.chm-11__stretch:hover span:nth-child(3){width:75%}
.chm-11__converge:hover span:nth-child(1){transform:translateY(10px)}
.chm-11__converge:hover span:nth-child(3){transform:translateY(-10px)}
.chm-11__converge:hover span:nth-child(2){background:var(--red)}
.chm-11__cascade:hover span:nth-child(1){background:var(--red);transform:translateX(4px)}
.chm-11__cascade:hover span:nth-child(2){background:var(--blue);transform:translateX(-4px)}
.chm-11__cascade:hover span:nth-child(3){background:var(--red);transform:translateX(4px)}
.chm-11__tilt:hover span:nth-child(1){transform:rotate(-6deg)}
.chm-11__tilt:hover span:nth-child(2){transform:scaleX(.6)}
.chm-11__tilt:hover span:nth-child(3){transform:rotate(6deg)}
.chm-11__bounce span{transform-origin:left}
.chm-11__bounce:hover span:nth-child(1){transform:scaleX(1.1)}
.chm-11__bounce:hover span:nth-child(2){transform:scaleX(.7);background:var(--blue)}
.chm-11__bounce:hover span:nth-child(3){transform:scaleX(.9)}
.chm-11__grow:hover span{height:6px;border-radius:2px}
.chm-11__grow:hover span:nth-child(1){top:4px}.chm-11__grow:hover span:nth-child(2){top:11px;background:var(--red)}.chm-11__grow:hover span:nth-child(3){top:18px}
.chm-11__tag{position:absolute;bottom:18px;right:22px;font-family:'Major Mono Display',monospace;font-size:10px;letter-spacing:.2em;color:#999;z-index:5}

@media (prefers-reduced-motion: reduce){
  .chm-11__ic span{transition:none !important}
}

More from 20 CSS Hamburger Menus

Flexbox Navbar with Right-Aligned Hamburger IconCircular Expand / Radial Ripple Mobile MenuFixed Sticky Header with Shrinking Hamburger IconNeumorphic Hamburger Menu Toggle ButtonBrutalist CSS Bordered Hamburger Menu3D Rotating Canvas Mobile Hamburger MenuPure CSS Hamburger Menu (No JavaScript)Bootstrap 5 Responsive Navbar with HamburgerCSS Slide Down Dropdown Hamburger MenuHamburger Menu with Morphing Icon AnimationsFull-Screen Overlay Mobile NavigationSlide-out Sidebar / Off-Canvas Navigation
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →