How do you create an expanding ring glow effect on a button click?

Create a div slightly larger than the button (100×100px for a 90px button), position it absolute, set border-radius:50%, give it a partial border using transparency: border:3px solid transparent; border-top-color:#7c3aed; border-right-color:#ec4899. Spin it with a separate @keyframes ringSpin at a different speed (1.2s vs the inner spinner's 0.9s). Control visibility via opacity:0 by default and opacity:1 when a .active class is on the parent button. The size difference (100px vs 70px inner spinner) and different rotation speed create a layered, depth-effect glow.

Where can I find more free CSS animation and button component projects?

Browse the full collection at coodeverse.com/projects — Cute Lamp Character (CSS keyframe character animation), Gold Ace Poker Cards (SVG filter effects), Neon Toggle Switch, Modern Neon Clock, VORTEX Canvas, and more. All 100% free with complete HTML CSS JavaScript source code.

Animated Refresh Button – Spinner & Ring Glow Free CSS JS

Enhanced Animated Refresh Button – Free CSS JavaScript Spinner & Ring Glow UI Component (Glassmorphism, Hover Scale, Simulated Progress)

The Enhanced Animated Refresh Button is a free, copy-paste ready circular UI button component built with pure HTML, CSS custom keyframes, and vanilla JavaScript. It is designed as a production-ready loading state button — drop it into any project as a visual refresh or reload trigger with a full animation lifecycle. The button is a 90×90px circle with glassmorphism: background: rgba(255,255,255,0.05), border: 2px solid rgba(255,255,255,0.15), backdrop-filter: blur(14px), box-shadow: 0 10px 30px rgba(0,0,0,0.55). The background uses a triple radial-gradient layer: purple glow at 20%/20%, cyan glow at 80%/80%, over --bg: #0f172a deep navy.

Hover state: transform: scale(1.2) rotate(-5deg) — the button scales up 20% and tilts 5 degrees counter-clockwise. box-shadow: 0 0 35px 8px rgba(124,58,237,0.8) adds an 8px spread purple glow that extends well beyond the button boundary. The SVG refresh icon strokes to #06b6d4 (cyan) and rotates 30 degrees with scale(1.15). Click state: the SVG icon is hidden (display:none), the spinner is shown — 70×70px, border: 5px solid rgba(255,255,255,0.2), border-top-color: #06b6d4, spinning via @keyframes spin at 0.9s linear infinite. Simultaneously the ring becomes visible (opacity 0→1) — 100×100px, border-top-color: #7c3aed (purple), border-right-color: #ec4899 (pink), rotating at 1.2s linear (slower than the inner spinner, creating a layered parallax). A simulated progress loop fires progress += 15 + Math.random() * 20 every 120ms until ≥100, then restores the icon.

What's Included in the Download

90px glassmorphism circle
backdrop-filter: blur(14px)
Triple radial-gradient background
Hover: scale(1.2) rotate(-5deg)
Hover: 35px 8px purple glow
SVG icon: hover cyan + rotate(30deg)
Spinner: 70px, border-top #06b6d4
@keyframes spin: 0.9s linear infinite
Ring: 100px, dual-color border
@keyframes ringSpin: 1.2s linear
Ring: purple #7c3aed + pink #ec4899
opacity:0→1 on .active class
JS: icon ↔ spinner swap on click
Simulated progress (15+rnd*20)
120ms setTimeout loop
Auto-reset on completion
CSS variables: --accent1/2/3
CC BY 4.0 — free for commercial use

How to Replace the Simulated Progress with a Real API Call

The simulated simulate() function is a placeholder for any real async operation. Replace it with your actual fetch/axios call: btn.classList.add('active'); icon.style.display='none'; spinner.style.display='block'; at the start, then in your .then() or after your await: spinner.style.display='none'; icon.style.display='block'; btn.classList.remove('active');. The button animation system is entirely driven by the .active class — add it to start, remove it to stop. The spinner and ring CSS are already set up to respond to that single class toggle.

Why Two Rings Spin at Different Speeds

The inner spinner (70px, 0.9s) and outer ring (100px, 1.2s) intentionally rotate at different speeds. Because 1.2/0.9 = 4/3, they synchronize every 3.6 seconds (LCM of 0.9 and 1.2). Between sync points they create a continuously shifting angular relationship — the dual-color ring appears to orbit around the spinner rather than tracking with it. This creates visual depth and movement complexity from just two simple @keyframes spin → rotate(360deg) animations.

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>Enhanced Animated Refresh Button</title>
</head>
<body>
<div class="refresh-btn" id="refreshBtn">
  <svg id="refreshIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path d="M4.93 4.93a10 10 0 0114.14 0l1.41-1.41"/>
    <path d="M20.07 19.07a10 10 0 01-14.14 0l-1.41 1.41"/>
  </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);
}

.refresh-btn {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.refresh-btn:hover {
  transform: scale(1.2) rotate(-5deg);
  box-shadow: 0 0 35px 8px rgba(124,58,237,0.8);
}

.refresh-btn svg {
  width: 42px;
  height: 42px;
  stroke: white;
  stroke-width: 3;
  transition: 0.3s ease;
  transform-origin: 50% 50%;
}

.refresh-btn:hover svg {
  stroke: var(--accent1);
  transform: rotate(30deg) scale(1.15);
}

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

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

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

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

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

const btn = document.getElementById('refreshBtn');
const spinner = document.getElementById('spinner');
const icon = document.getElementById('refreshIcon');
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 += 15 + Math.random() * 20;
    if (progress < 100) {
      setTimeout(simulate, 120);
    } else {
      spinner.style.display = 'none';
      icon.style.display = 'block';
      btn.classList.remove('active');
    }
  }
  simulate();
});

Frequently Asked Questions

Common questions about the free Enhanced Animated Refresh Button project.

Is this animated refresh 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 a loading state button component in any project with attribution to Coodeverse.

How do you create a glassmorphism circular button in CSS?

Set equal width/height with border-radius:50% for a circle. Then: background:rgba(255,255,255,0.05) (near-transparent fill), border:2px solid rgba(255,255,255,0.15) (subtle white border), backdrop-filter:blur(14px) (frosted glass blur of background), box-shadow:0 10px 30px rgba(0,0,0,0.55) (depth shadow). Add overflow:hidden to contain child elements (spinner, ring) within the circle boundary.

How do you make a button glow on hover with CSS?

Use box-shadow with spread radius: .refresh-btn:hover { box-shadow: 0 0 35px 8px rgba(124,58,237,0.8); }. The syntax: 0 x-offset, 0 y-offset, 35px blur, 8px spread (extends 8px beyond the element in all directions), rgba(124,58,237,0.8) purple at 80% opacity. Combine with transform:scale(1.2) rotate(-5deg) and transition:0.3s ease for a simultaneous scale + tilt + glow hover effect.

How do you create a CSS spinner animation for a loading button?

Create a circle div: border:5px solid rgba(255,255,255,0.2); border-top-color:#06b6d4; border-radius:50%. One colored border-top creates a spinning arc. Animate: @keyframes spin { to { transform:rotate(360deg); } } applied as animation:spin 0.9s linear infinite. Use display:none by default and toggle to display:block on click. Position absolute inside the button (relative parent) to layer over the SVG icon.

How do you create a dual-color expanding ring glow around a button?

Create a div slightly larger than the button (100px for a 90px button): border:3px solid transparent; border-top-color:#7c3aed; border-right-color:#ec4899; border-radius:50%. Spin at a different speed: animation:ringSpin 1.2s linear infinite. Control via opacity:0 default → opacity:1 when parent has .active class. The two-speed difference (0.9s inner vs 1.2s ring) creates continuous angular shift — the ring appears to orbit the spinner rather than track with it.

How do you simulate a loading progress loop in JavaScript?

Use recursive setTimeout: let progress = 0; function simulate() { progress += 15 + Math.random() * 20; if (progress < 100) { setTimeout(simulate, 120); } else { /* complete */ } } simulate(). Each call advances 15–35 at random and schedules the next at 120ms. The randomness makes loading feel natural. On completion, reverse all state: hide spinner, show icon, remove .active class. Replace simulate() with your real fetch/.then() for production use.

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

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