How do you draw an SVG login/sign-in arrow icon inline?

Three SVG paths inside viewBox='0 0 24 24' (implied 24px grid): door frame: M15 3h4v18h-4 (rectangle on the right side, representing a doorway). Arrow pointing right into door: M10 17l5-5-5-5 (chevron — up 5, right 5, up 5 creates a right-pointing arrow). Horizontal line from left meeting arrow: M4 12h11 (horizontal line from x:4 to x:11). Set stroke:white, stroke-width:2, stroke-linecap:round, stroke-linejoin:round, fill:none. This produces a universally recognized login/enter icon using only path data.

Animated Sign-In Button – Gradient Glow & Progress Free CSS JS

Animated Sign-In Button – Free CSS JavaScript Gradient Outline Glow, Shine, Spinner & Progress Bar Auth UI Component (Glassmorphism, mask-composite:exclude, 3-State Labels)

The Animated Sign-In Button is a free, copy-paste ready auth UI button component built with pure HTML, advanced CSS pseudo-element mask techniques, and vanilla JavaScript. It is architecturally distinct from the circular spinner buttons — this is a pill-shaped glassmorphism button with four layered animation effects that activate in sequence across hover and click states. Base styles: border-radius: 14px, padding: 16px 34px, background: rgba(255,255,255,0.06), backdrop-filter: blur(10px), overflow: hidden, display: flex, gap: 12px.

Gradient outline glow — the most technically advanced feature — uses a ::before pseudo-element with the CSS mask-composite trick: inset: -2px (extends 2px beyond the button), padding: 2px, background: linear-gradient(135deg, #4f46e5, #7c3aed, #06b6d4) (indigo→violet→cyan), mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0), mask-composite: exclude — this punches out the content area, leaving only the 2px padding ring visible as a gradient border with zero fill. The ::before sits at opacity: 0, transitioning to opacity: 1 on hover. Shine sweep: a .shine span starts at left: -120%, width 50%, transform: skewX(-18deg), sweeps to left: 130% over 1s on hover — a diagonal catch-light crossing the full button. Click state: label changes to 'Signing In…', SVG login icon hides, 18px white spinner (0.8s) shows, and a 4px gradient progress bar (position: absolute; bottom: 0; left: 0) fills via style.width = Math.min(100, p) + '%' with transition: width 0.2s linear. Progress loop: p += 5 + Math.random() * 15 every 120ms. On completion: label → 'Welcome!', 2000ms pause, then full restore.

What's Included in the Download

Pill button border-radius:14px
backdrop-filter: blur(10px)
Hover: translateY(-4px) scale(1.03)
Hover: 18px purple glow
::before gradient outline glow
mask-composite: exclude trick
Gradient: #4f46e5→#7c3aed→#06b6d4
inset:-2px padding:2px ring
.shine: skewX(-18deg) sweep 1s
left:-120% → 130% transition
SVG login icon (3 paths)
Spinner: 18px, white, 0.8s
4px progress bar, bottom:0
transition: width 0.2s linear
Progress: 5+rnd*15 at 120ms
Label: 'Sign In'→'Signing In…'→'Welcome!'
2s success display + auto-restore
CC BY 4.0 — free for commercial use

The CSS mask-composite:exclude Gradient Border Technique Explained

The mask-composite: exclude trick solves a fundamental CSS problem: how to show a gradient border without filling the button's background with the gradient. The ::before is 4px larger than the button on all sides (inset: -2px). It has a gradient background filling its entire area. Then two mask layers are applied — one clipping to content-box (the inner area) and one covering the full element — and mask-composite: exclude subtracts the inner area from the full mask. The result: only the 2px border ring is visible. The button's actual background (rgba(255,255,255,0.06)) shows through the center unchanged. No wrapper divs, no JavaScript, no SVG borders required. The -webkit-mask-composite: xor prefix handles Safari compatibility.

How the 4px Progress Bar Works

The progress bar is a div inside the button with position: absolute; bottom: 0; left: 0; height: 4px; width: 0%; background: var(--accent). The transition: width 0.2s linear smooths each JavaScript step. As the simulate() loop increments p and sets progress.style.width = Math.min(100, p) + '%', the browser interpolates between each step value over 200ms — creating a smooth fill even though the underlying value jumps by 5–20 per step. The Math.min(100, p) clamps it to exactly 100% to prevent overflow. At completion, progress.style.width = '0%' instantly resets it (no transition needed for the reset since the button is in the success state and the bar isn't visible to the user).

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>Animated Sign-In Button</title>
</head>
<body>
  <button class="signin-btn" id="signinBtn">
    <svg id="loginIcon" width="20" height="20" fill="none" stroke="white"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M15 3h4v18h-4"/>
      <path d="M10 17l5-5-5-5"/>
      <path d="M4 12h11"/>
    </svg>
    <div class="spinner" id="spinner"></div>
    <span id="labelText">Sign In</span>
    <span class="shine"></span>
    <div class="progress" id="progress"></div>
  </button>
</body>
</html>

:root {
  --bg: #0f172a;
  --accent: linear-gradient(135deg, #4f46e5, #7c3aed, #06b6d4);
  --glass: rgba(255,255,255,0.06);
}

body {
  margin: 0;
  font-family: Inter, sans-serif;
  height: 100vh;
  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);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.signin-btn {
  position: relative;
  padding: 16px 34px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  transition: 0.25s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
}

.signin-btn:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 18px rgba(124,58,237,0.55);
}

/* gradient outline glow */
.signin-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: var(--accent);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: 0.4s ease;
}

.signin-btn:hover::before { opacity: 1; }

/* shine */
.shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-18deg);
  transition: 1s;
  pointer-events: none;
}

.signin-btn:hover .shine { left: 130%; }

/* loading spinner */
.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}

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

.progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s linear;
}

const btn = document.getElementById('signinBtn');
const progress = document.getElementById('progress');
const label = document.getElementById('labelText');
const icon = document.getElementById('loginIcon');
const spinner = document.getElementById('spinner');

btn.addEventListener('click', () => {
  label.textContent = 'Signing In...';
  icon.style.display = 'none';
  spinner.style.display = 'block';

  let p = 0;
  function simulate() {
    p += 5 + Math.random() * 15;
    progress.style.width = Math.min(100, p) + '%';
    if (p < 100) {
      setTimeout(simulate, 120);
    } else {
      label.textContent = 'Welcome!';
      spinner.style.display = 'none';
      progress.style.width = '0%';
      setTimeout(() => {
        label.textContent = 'Sign In';
        icon.style.display = 'block';
      }, 2000);
    }
  }
  simulate();
});

Frequently Asked Questions

Common questions about the free Animated Sign-In Button project.

Is this animated sign-in button free to download?

Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment. Click Download Project and use it in any auth UI project with attribution to Coodeverse.

How do you create a CSS gradient border glow on a button without changing its background?

Use the mask-composite: exclude trick: .signin-btn::before { content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background:linear-gradient(135deg,#4f46e5,#7c3aed,#06b6d4); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:0.4s ease; }. The mask subtracts the content box from the full element — leaving only the 2px padding ring visible as a gradient border. Set opacity:0 by default, opacity:1 on :hover::before to animate it in.

How do you create a sweeping shine effect on a button in CSS?

Add a child span: position:absolute; top:0; left:-120%; width:50%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent); transform:skewX(-18deg); transition:1s; pointer-events:none. On parent hover: .signin-btn:hover .shine { left:130%; }. Starts off-screen left, sweeps fully across in 1s. The skewX(-18deg) creates a diagonal catch-light. overflow:hidden on the parent clips it to the button boundary.

How do you animate a progress bar inside a button during a loading state?

Add: position:absolute; bottom:0; left:0; height:4px; width:0%; background:gradient; transition:width 0.2s linear. In JS: let p=0; function simulate() { p += 5 + Math.random()*15; progress.style.width = Math.min(100,p) + '%'; if(p<100) { setTimeout(simulate,120); } else { /* complete */ } } simulate(). The transition:width 0.2s linear smooths each step. Math.min(100,p) clamps to 100%.

How do you handle label state transitions in a loading button?

Use a span for the label and change textContent at each state: on click: label.textContent = 'Signing In...'. On complete: label.textContent = 'Welcome!'. After 2000ms: label.textContent = 'Sign In' + restore icon. Three states total. Reuse the pattern for any action button — swap strings to match: 'Saving...'→'Saved!', 'Processing...'→'Paid!', 'Sending...'→'Sent!'.

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

Three paths in a 24×24 viewBox: door frame M15 3h4v18h-4 (rectangle right side), arrow M10 17l5-5-5-5 (right-pointing chevron — up 5, right 5, up 5), horizontal line M4 12h11 (meets the arrow). Set fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round". Produces a standard login/enter icon using only inline SVG path data — no library required.

Where can I find more free animated button and auth UI projects?

Browse coodeverse.com/projects — Stylish Animated Search Button, Enhanced Animated Refresh Button, Holographic Login (full auth page), Cute Lamp Character, Modern Neon Clock, and more. All 100% free with complete HTML CSS JavaScript source code.