Circle CSS Button animation | HTML, CSS & JavaScript

<main class="page">
    <section class="grid" aria-label="Circle button animation examples">
      <article class="card">
        <h2>1. Ripple Effect</h2>
        <div class="demo"><a class="circle ripple" href="#" aria-label="Ripple button" onclick="return false"><span class="arrow">→</span></a></div>
        <p class="description">Expanding rings ripple outward when you hover.</p>
      </article>

<article class="card">
        <h2>2. Border Spin</h2>
        <div class="demo"><a class="circle spin" href="#" aria-label="Spinning border button" onclick="return false"><span class="arrow">→</span></a></div>
        <p class="description">A vibrant gradient border gives the circle a lively twist.</p>
      </article>

<article class="card">
        <h2>3. Fill from Center</h2>
        <div class="demo"><a class="circle fill" href="#" aria-label="Center fill button" onclick="return false"><span class="arrow">→</span></a></div>
        <p class="description">A colorful fill grows from the center on hover.</p>
      </article>

<article class="card">
        <h2>4. Neon Glow</h2>
        <div class="demo"><a class="circle glow" href="#" aria-label="Neon glow button" onclick="return false"><span class="arrow">→</span></a></div>
        <p class="description">A cyan neon glow lights up around the button.</p>
      </article>

<article class="card">
        <h2>5. Scale Animation</h2>
        <div class="demo"><a class="circle scale" href="#" aria-label="Scale button" onclick="return false"><span class="arrow">→</span></a></div>
        <p class="description">The button smoothly grows with a soft purple shadow.</p>
      </article>

<article class="card">
        <h2>6. Dashed Ring</h2>
        <div class="demo"><a class="circle dashed" href="#" aria-label="Dashed ring button" onclick="return false"><span class="arrow">→</span></a></div>
        <p class="description">The dashed outer ring rotates and expands on hover.</p>
      </article>
      <article class="card">
        <h2>1. Ripple Effect</h2>
        <div class="demo"><a class="circle ripple" href="#" aria-label="Ripple button" onclick="return false"><span class="arrow">→</span></a></div>
        <p class="description">Expanding rings ripple outward when you hover.</p>
      </article>
    </section>
  </main>

:root {
      --bg: #0b1120;
      --panel: #101a2b;
      --border: #24334b;
      --text: #f4f7ff;
      --muted: #a9b8d0;
      --blue: #3b82f6;
      --purple: #8b5cf6;
      --cyan: #22d3ee;
    }

* { box-sizing: border-box; }

body {
      margin: 0;
      min-height: 100vh;
      padding: 36px 20px 48px;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 0%, rgba(59,130,246,.13), transparent 32rem),
        radial-gradient(circle at 90% 20%, rgba(139,92,246,.12), transparent 30rem),
        var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

.page { width: min(1120px, 100%); margin: 0 auto; }

header { text-align: center; margin-bottom: 34px; }
    h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -1.5px; }
    h1 span {
      background: linear-gradient(90deg, #60a5fa, #c084fc, #22d3ee);
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
    }
    header p { margin: 0; color: var(--muted); font-size: 1.05rem; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .card {
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(16,26,43,.96), rgba(8,16,29,.96));
      box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }
    .card h2 { margin: 0; padding: 18px 18px 0; font-size: 1.05rem; font-weight: 650; }
    .demo {
      min-height: 170px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .description { color: var(--muted); text-align: center; font-size: .9rem; padding: 0 18px 18px; }

.circle {
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 76px;
      height: 76px;
      flex: 0 0 76px;
      border-radius: 50%;
      color: #fff;
      background: #111c30;
      border: 2px solid var(--blue);
      cursor: pointer;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    }
    .circle:focus-visible { outline: 3px solid white; outline-offset: 5px; }
    .arrow { position: relative; z-index: 2; font-size: 2rem; line-height: 1; transition: transform .3s ease; }
    .circle:hover .arrow { transform: translateX(3px); }

/* 1. Ripple effect */
    .ripple { border-color: #3b82f6; }
    .ripple::before, .ripple::after {
      content: "";
      position: absolute;
      inset: -2px;
      z-index: -1;
      border: 2px solid #6366f1;
      border-radius: inherit;
      opacity: 0;
      transition: transform .55s ease, opacity .55s ease;
    }
    .ripple:hover { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
    .ripple:hover::before { opacity: .75; transform: scale(1.25); }
    .ripple:hover::after { opacity: .45; transform: scale(1.55); }

/* 2. Spinning gradient border */
    .spin { border: 0; background: conic-gradient(from 0deg, #22d3ee, #8b5cf6, #ec4899, #22d3ee); }
    .spin::before {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: inherit;
      background: #111c30;
      z-index: 0;
    }
    .spin:hover { transform: rotate(12deg); box-shadow: 0 0 25px rgba(139,92,246,.28); }
    .spin:hover::before { background: #17233a; }

/* 3. Fill from center */
    .fill { overflow: hidden; border-color: #8b5cf6; }
    .fill::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      transform: scale(0);
      transition: transform .35s ease;
    }
    .fill:hover::before { transform: scale(1); }

/* 4. Neon glow */
    .glow { border: 2px solid #22d3ee; }
    .glow:hover {
      background: #075985;
      box-shadow: 0 0 12px #22d3ee, 0 0 28px rgba(34,211,238,.75), inset 0 0 14px rgba(34,211,238,.3);
    }

/* 5. Scale and shadow */
    .scale {
      border: 0;
      background: linear-gradient(135deg, #a78bfa, #7c3aed);
      box-shadow: 0 8px 22px rgba(124,58,237,.22);
    }
    .scale:hover { transform: scale(1.13); box-shadow: 0 0 32px rgba(139,92,246,.6); }
    .scale:active { transform: scale(.96); }

/* 6. Animated dashed ring */
    .dashed { border-color: #22d3ee; }
    .dashed::before {
      content: "";
      position: absolute;
      inset: -13px;
      border: 2px dashed #22d3ee;
      border-radius: 50%;
      transition: transform .45s ease, border-color .45s ease;
    }
    .dashed:hover::before { transform: rotate(180deg) scale(1.12); border-color: #a78bfa; }
    .dashed:hover { box-shadow: 0 0 20px rgba(34,211,238,.18); }

.hint { margin: 26px 0 0; text-align: center; color: #8293ad; font-size: .85rem; }

@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px) {
      body { padding: 28px 14px 36px; }
      .grid { grid-template-columns: 1fr; gap: 14px; }
      .demo { min-height: 145px; }
      h1 { letter-spacing: -1px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }

- Circle CSS Button animation

Live Preview