Webflow dock with magnifying icons

What you receive in Webflow

• 26 native elements and 13 classes.
• Breakpoints: mobile landscape (767px).
• 8 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="dk">
  <div class="dk-inner">
    <h2 class="dk-title">Everything you need, one click away</h2>
    <p class="dk-text">Hover the dock: icons grow toward the pointer and a label springs up.</p>
    <nav class="dk-dock" aria-label="Apps">
      <a class="dk-app" href="#" style="--c1:#60a5fa;--c2:#2563eb"><svg class="dk-glyph" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16v12H4z"/><path d="M4 7l8 6 8-6"/></svg><span class="dk-tip">Mail</span></a>
      <a class="dk-app" href="#" style="--c1:#fbbf24;--c2:#ea580c"><svg class="dk-glyph" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 19l1-4L16 5l3 3L9 18z"/><path d="M14 7l3 3"/></svg><span class="dk-tip">Notes</span></a>
      <a class="dk-app" href="#" style="--c1:#34d399;--c2:#059669"><svg class="dk-glyph" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h3l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 4 6a2 2 0 0 1 2-2z"/></svg><span class="dk-tip">Calls</span></a>
      <a class="dk-app" href="#" style="--c1:#f472b6;--c2:#db2777"><svg class="dk-glyph" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V6l10-2v12"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="16" r="2"/></svg><span class="dk-tip">Music</span></a>
      <a class="dk-app" href="#" style="--c1:#a78bfa;--c2:#7c3aed"><svg class="dk-glyph" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 18h10a4 4 0 0 0 .5-8 6 6 0 0 0-11.4 1.6A3.3 3.3 0 0 0 7 18z"/></svg><span class="dk-tip">Files</span></a>
      <a class="dk-app" href="#" style="--c1:#94a3b8;--c2:#475569"><svg class="dk-glyph" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1"/></svg><span class="dk-tip">Settings</span></a>
    </nav>
  </div>
</section>
<style>
.dk { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: linear-gradient(180deg, #e0e7ff 0%, #fae8ff 100%); color: #1e1b4b; padding: 112px 24px 120px; }
.dk-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.dk-title { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 12px; }
.dk-text { font-size: 17px; line-height: 1.6; color: #4338ca; margin: 0 0 96px; }
.dk-dock { display: inline-flex; align-items: flex-end; gap: 10px; height: 76px; padding: 10px 14px; border-radius: 24px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 20px 50px -20px rgba(30, 27, 75, 0.35); }
.dk-app { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 15px; background: linear-gradient(160deg, var(--c1), var(--c2)); color: #ffffff; text-decoration: none; transform-origin: 50% 100%; transform: scale(var(--s, 1)); transition: transform 0.18s ease-out; }
.dk-app:focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; }
.dk-glyph { display: block; width: 26px; height: 26px; }
.dk-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); padding: 6px 11px; border-radius: 8px; background: rgba(30, 27, 75, 0.88); color: #ffffff; font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 8px) scale(0.6); transform-origin: 50% 100%; transition: opacity 0.15s ease, transform 0.35s cubic-bezier(0.3, 1.8, 0.5, 1); }
.dk-app:hover .dk-tip, .dk-app:focus-visible .dk-tip { opacity: 1; transform: translate(-50%, 0) scale(calc(1 / var(--s, 1))); }
@media (max-width: 767px) { .dk { padding: 80px 16px; } .dk-title { font-size: 30px; } .dk-dock { gap: 6px; padding: 8px 10px; height: 60px; } .dk-app { width: 42px; height: 42px; border-radius: 12px; } .dk-glyph { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .dk-app { transition: none; } }
</style>
<script>
(function () {
  if (window.matchMedia && (matchMedia("(prefers-reduced-motion: reduce)").matches || matchMedia("(hover: none)").matches)) return;
  document.querySelectorAll(".dk-dock").forEach(function (dock) {
    var apps = dock.querySelectorAll(".dk-app");
    dock.addEventListener("pointermove", function (e) {
      apps.forEach(function (a) {
        var r = a.getBoundingClientRect(), d = Math.abs(e.clientX - (r.left + r.width / 2));
        a.style.setProperty("--s", (1 + 0.55 * Math.max(0, 1 - d / 150)).toFixed(3));
      });
    });
    dock.addEventListener("pointerleave", function () { apps.forEach(function (a) { a.style.setProperty("--s", 1); }); });
  });
})();
</script>