How do you draw an SVG magnifier (search) icon inline in HTML?

Use two SVG paths inside a viewBox='0 0 24 24': a circle for the lens — — and a diagonal line for the handle — . Set fill='none' stroke='currentColor' stroke-width='2.5'. The line starts at 21,21 (bottom-right corner) and ends at 16.65,16.65 where the circle edge is (~r*sqrt(2)/2 from center 11,11 = 8*0.707+11 = 16.66). This creates a clean magnifier shape using only two elements.

How do you animate a search icon to hint at 'searching' on hover?

On .search-btn:hover svg, apply: stroke:var(--accent1) to change the icon color from white to cyan (#06b6d4), and transform:rotate(20deg) scale(1.1) to rotate the magnifier 20 degrees and slightly enlarge it. This creates a visual cue that the button is active/ready. The rotation suggests circular search motion and the color change confirms the hover state. Add transition:0.3s ease to smooth the color and transform changes.

Animated Search Button – Spinner & Ring Glow Free CSS JS

Stylish Animated Search Button – Free CSS JavaScript Spinner & Ring Glow Search UI Component (Glassmorphism, SVG Magnifier, Hover Scale, Simulated Progress)

The Stylish Animated Search Button is a free, copy-paste ready circular search UI button component built with pure HTML, CSS custom keyframes, and vanilla JavaScript. It is designed as a production-ready animated search trigger — providing a full visual lifecycle from idle to searching to complete. The button is an 80×80px circle with glassmorphism: background: rgba(255,255,255,0.06), border: 1px solid rgba(255,255,255,0.15), backdrop-filter: blur(12px), box-shadow: 0 8px 25px rgba(0,0,0,0.5). It shares the same architectural pattern as the Enhanced Animated Refresh Button but is tuned smaller, softer, and slightly slower — appropriate for a search query state rather than a hard reload.

The SVG icon is an inline magnifier: <circle cx="11" cy="11" r="8"/> + <line x1="21" y1="21" x2="16.65" y2="16.65"/> — the line endpoint is at 11 + 8×cos(45°) ≈ 16.66, placing it exactly at the circle edge. Hover state: transform: scale(1.15) rotate(-3deg) + glow box-shadow: 0 0 25px 6px rgba(124,58,237,0.7). SVG turns cyan (#06b6d4) and rotates 20 degrees. Click state: icon hides, spinner shows — 60×60px, border-top-color: #06b6d4, at 1s linear. The ring activates via .active class — 90×90px, border-top-color: #7c3aed (purple), border-right-color: #ec4899 (pink), at 1.5s linear (ratio 3:2 with spinner — they re-align every 3 seconds). Progress loop: progress += 10 + Math.random() * 15 every 150ms until ≥100, then restores.

What's Included in the Download

80px glassmorphism circle
backdrop-filter: blur(12px)
SVG magnifier (circle + line)
Inline cx:11 cy:11 r:8 math
Hover: scale(1.15) rotate(-3deg)
Hover: 25px 6px purple glow
SVG: hover cyan + rotate(20deg)
Spinner: 60px, border-top #06b6d4
@keyframes spin: 1s linear infinite
Ring: 90px, dual-color border
@keyframes ringSpin: 1.5s linear
Ring: purple #7c3aed + pink #ec4899
opacity:0→1 on .active class
JS: icon ↔ spinner swap on click
Progress: 10+rnd*15 at 150ms
Auto-reset on completion
CSS variables: --accent1/2/3
CC BY 4.0 — free for commercial use

Search Button vs Refresh Button: Key Differences Explained

Both buttons use identical CSS architecture (glassmorphism circle → hover glow → click spinner + ring → progress reset) but are deliberately tuned differently. The search button is 10px smaller (80px vs 90px), uses a lighter blur (12px vs 14px), gentler hover scale (1.15 vs 1.2), tighter glow spread (6px vs 8px), and a slower progress loop (10+rnd*15 at 150ms vs 15+rnd*20 at 120ms). The ring runs at 1.5s (vs 1.2s) — creating a 3:2 ratio with its 1s spinner, producing a smooth 3-second re-alignment cycle. These values make the search button feel considered and deliberate — the visual language of waiting for query results rather than a hard system reload.

License

Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.

Source Code

HTML

CSS

JavaScript

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stylish Animated Search Button</title>
</head>
<body>
<div class="search-btn" id="searchBtn">
  <svg id="searchIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <circle cx="11" cy="11" r="8"/>
    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
  </svg>
  <div class="spinner" id="spinner"></div>
  <div class="ring" id="ring"></div>
</div>
</body>
</html>

:root {
  --bg: #0f172a;
  --accent1: #06b6d4;
  --accent2: #7c3aed;
  --accent3: #ec4899;
}

body {
  margin: 0;
  font-family: Inter, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,0.15), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(6,182,212,0.15), transparent 50%),
    var(--bg);
}

.search-btn {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.search-btn:hover {
  transform: scale(1.15) rotate(-3deg);
  box-shadow: 0 0 25px 6px rgba(124,58,237,0.7);
}

.search-btn svg {
  width: 38px;
  height: 38px;
  stroke: white;
  stroke-width: 2.5;
  transition: 0.3s ease;
}

.search-btn:hover svg {
  stroke: var(--accent1);
  transform: rotate(20deg) scale(1.1);
}

.spinner {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

.ring {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent2);
  border-right-color: var(--accent3);
  animation: ringSpin 1.5s linear infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes ringSpin { to { transform: rotate(360deg); } }

.search-btn.active .ring { opacity: 1; }

const btn = document.getElementById('searchBtn');
const spinner = document.getElementById('spinner');
const icon = document.getElementById('searchIcon');
const ring = document.getElementById('ring');

btn.addEventListener('click', () => {
  btn.classList.add('active');
  icon.style.display = 'none';
  spinner.style.display = 'block';

  let progress = 0;
  function simulate() {
    progress += 10 + Math.random() * 15;
    if (progress < 100) {
      setTimeout(simulate, 150);
    } else {
      spinner.style.display = 'none';
      icon.style.display = 'block';
      btn.classList.remove('active');
    }
  }
  simulate();
});

Frequently Asked Questions

Common questions about the free Stylish Animated Search Button project.

Is this animated search button free to download?

Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment. Click Download Project and use it as an animated search or loading state button in any project with attribution to Coodeverse.

How is this animated search button different from the animated refresh button?

Same glassmorphism + spinner + ring architecture, tuned differently: search button is 80px (vs 90px), blur(12px) (vs blur(14px)), hover scale(1.15) (vs scale(1.2)), glow spread 6px (vs 8px), spinner 60px at 1s (vs 70px at 0.9s), ring 90px at 1.5s (vs 100px at 1.2s), progress 10+rnd*15 at 150ms (vs 15+rnd*20 at 120ms). The SVG icon is a magnifier (circle cx:11 cy:11 r:8 + diagonal line) rather than two refresh arcs. The search button's slower feel suits a query-wait state.

How do you draw an SVG magnifier icon inline in HTML?

Use two elements inside viewBox="0 0 24 24": <circle cx="11" cy="11" r="8"/> for the lens and <line x1="21" y1="21" x2="16.65" y2="16.65"/> for the handle. The line endpoint 16.65 = 11 + 8×cos(45°) ≈ 11 + 5.66, placing it exactly at the circle's bottom-right edge. Set fill="none" stroke="currentColor" stroke-width="2.5". Uses only two SVG primitives with no external image or icon library.

How do you create a glassmorphism circular button in CSS?

Equal width/height + border-radius:50% for the circle. Then: background:rgba(255,255,255,0.06) (6% white translucent fill), border:1px solid rgba(255,255,255,0.15) (frosted edge), backdrop-filter:blur(12px) (blurs the content behind — the core glassmorphism property), box-shadow:0 8px 25px rgba(0,0,0,0.5) (depth), overflow:hidden (clips spinner and ring within the circle).

How do you animate a search icon on hover to hint at an action?

On .search-btn:hover svg, apply stroke:var(--accent1) to change from white to cyan (#06b6d4) and transform:rotate(20deg) scale(1.1) to rotate the magnifier slightly and enlarge it. The rotation mimics a scanning motion. Add transition:0.3s ease on the SVG element to smooth both changes. Combined with the parent button's scale+glow, the result is a layered hover response that communicates interactivity clearly.

How do you make the ring spin slower than the inner spinner?

Give each its own duration: spinner animation:spin 1s linear infinite, ring animation:ringSpin 1.5s linear infinite. Both keyframes are identical (to{transform:rotate(360deg)}), only the timing differs. At 1s vs 1.5s (ratio 2:3), they re-align every 3 seconds (LCM of 1 and 1.5). Between those points the ring continuously lags behind the spinner, creating a slow orbital parallax effect with zero additional CSS complexity.

Where can I find more free CSS animation and search UI projects?

Browse coodeverse.com/projects — Enhanced Animated Refresh Button (same architecture, refresh icon), Cute Lamp Character (CSS keyframe character), Gold Ace Poker Cards (SVG filters), Modern Neon Clock, NEXUS 3D CSS Cubes, and more. All 100% free with complete HTML CSS JavaScript source code.