How do you draw an SVG upload or add-user arrow icon inline in HTML?

Three paths inside viewBox='0 0 24 24': vertical center line M12 5v14 (straight vertical line through center), upward-pointing chevron M7 10l5-5 5 5 (from x:7 y:10, move 5 left/up to tip at 12,5, then 5 right/down to x:17 y:10 — creating an upward arrow), horizontal base M4 19h16 (bottom bar from x:4 to x:20 at y:19). Set fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'. The combination reads as 'upload' or 'add/submit' — appropriate for sign-up / account creation.

How do you customize the loading label text for different button actions?

The JavaScript pattern is generic: on click set label.textContent to any in-progress string, on complete set it to a success string, after setTimeout restore to the idle string. Examples: sign-up uses 'Sign Up'→'Creating Account…'→'Welcome!'; sign-in uses 'Sign In'→'Signing In…'→'Welcome!'; a save button could use 'Save'→'Saving…'→'Saved!'; a checkout button 'Pay'→'Processing…'→'Payment Complete!'; a subscribe button 'Subscribe'→'Subscribing…'→'Subscribed!'. The 2000ms success display duration (setTimeout before restore) can be shortened for non-critical actions or extended for important confirmations.

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

Animated Sign-Up Button – Free CSS JavaScript Pink Gradient Outline Glow, Shine, Spinner & Progress Bar Registration UI Component (Glassmorphism, mask-composite:exclude, 'Creating Account…')

The Animated Sign-Up Button is a free, copy-paste ready registration UI button component built with pure HTML, CSS pseudo-element mask tricks, and vanilla JavaScript. It is the pink-identity sibling of the Animated Sign-In Button — sharing the identical glassmorphism + gradient outline + shine + spinner + progress architecture, but differentiated with a pink-led color system appropriate for the registration action. The gradient: --accent: linear-gradient(135deg, #ec4899, #7c3aed, #06b6d4) leads with hot pink (#ec4899), through violet, to cyan. The ambient background uses rgba(236,72,153,0.15) at 20%/20% instead of the sign-in's purple ambient — visually signalling a different action even before any interaction.

Hover state: transform: translateY(-4px) scale(1.03), box-shadow: 0 0 18px rgba(236,72,153,0.55) (pink glow). Gradient outline: ::before with inset: -2px, padding: 2px, mask-composite: exclude reveals only the 2px border ring in the pink→violet→cyan gradient. Shine: .shine span, skewX(-18deg), sweeps left: -120% → 130% over 1s. Click: label → 'Creating Account…', SVG upload icon hides, 18px white spinner (0.8s linear) appears, 4px gradient progress bar fills via p += 5 + Math.random() * 15 every 120ms. On completion: 'Welcome!' for 2000ms, then full restore to 'Sign Up' + icon. The SVG icon is an upload/add arrow: M12 5v14 (vertical center line), M7 10l5-5 5 5 (upward chevron), M4 19h16 (horizontal base) — reading as "submit upward" or "add account."

What's Included in the Download

Pink-led gradient #ec4899→#7c3aed→#06b6d4
backdrop-filter: blur(10px)
Hover: translateY(-4px) scale(1.03)
Hover: 18px pink glow
::before pink gradient outline
mask-composite: exclude ring trick
Pink ambient background (20%/20%)
.shine: skewX(-18deg) sweep 1s
SVG upload icon (3 paths)
Spinner: 18px, white, 0.8s
4px progress bar, bottom:0
transition: width 0.2s linear
Progress: 5+rnd*15 at 120ms
'Sign Up'→'Creating Account…'→'Welcome!'
2s success display + auto-restore
CSS variable --accent for easy recolor
Pairs with sign-in button for auth pages
CC BY 4.0 — free for commercial use

Sign-Up vs Sign-In: Color Identity in Auth UI Design

The sign-up button's pink identity (#ec4899 leading the gradient, pink hover glow, pink ambient background) versus the sign-in button's indigo identity (#4f46e5 leading, purple glow) encodes a common UX convention: the returning user action (sign-in) uses a cool, familiar tone; the new user action (sign-up) uses a warm, energetic tone to signal opportunity and invite. When paired on the same auth page, users can distinguish the two actions by color alone without reading the label. Both buttons use identical structure, sizing (border-radius:14px, padding:16px 34px), and animation timing — making them visually cohesive as a matched pair.

How to Customize the Label for Any Registration Flow

The three-state label pattern is fully generic. Replace the strings in the JavaScript to match your UX copy: 'Sign Up' (idle) → 'Creating Account…' (loading) → 'Welcome!' (success). Other examples: 'Register'→'Registering…'→'All Set!', 'Join Now'→'Joining…'→'You're In!', 'Get Started'→'Setting Up…'→'Ready!'. Change the 2000ms success display in setTimeout() to match your redirect timing — if you redirect immediately on success, set it to 0 or remove the restore step entirely.

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-Up Button</title>
</head>
<body>
  <button class="signup-btn" id="signupBtn">
    <svg id="signupIcon" width="20" height="20" fill="none" stroke="white"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 5v14"/>
      <path d="M7 10l5-5 5 5"/>
      <path d="M4 19h16"/>
    </svg>
    <div class="spinner" id="spinner"></div>
    <span id="labelText">Sign Up</span>
    <span class="shine"></span>
    <div class="progress" id="progress"></div>
  </button>
</body>
</html>

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

body {
  margin: 0;
  font-family: Inter, sans-serif;
  height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(236,72,153,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;
}

.signup-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);
}

.signup-btn:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 18px rgba(236,72,153,0.55);
}

.signup-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;
}

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

.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;
}

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

.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('signupBtn');
const progress = document.getElementById('progress');
const label = document.getElementById('labelText');
const icon = document.getElementById('signupIcon');
const spinner = document.getElementById('spinner');

btn.addEventListener('click', () => {
  label.textContent = 'Creating Account...';
  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 Up';
        icon.style.display = 'block';
      }, 2000);
    }
  }
  simulate();
});

Frequently Asked Questions

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

Is this animated sign-up 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 registration or auth UI project with attribution to Coodeverse.

How is this animated sign-up button different from the animated sign-in button?

Same architecture, three differences: (1) Color — sign-up uses #ec4899 (pink) leading the gradient and pink hover glow rgba(236,72,153,0.55); sign-in uses #4f46e5 (indigo) with purple glow. (2) Icon — sign-up shows an SVG upload arrow (vertical line + upward chevron + horizontal base); sign-in shows a door+entry arrow. (3) Label — sign-up uses 'Creating Account…'; sign-in uses 'Signing In…'. Use both together on an auth page for a cohesive but visually distinct matched pair.

How do you draw an SVG upload or add-account arrow icon inline in HTML?

Three paths in viewBox="0 0 24 24": vertical center line M12 5v14, upward chevron M7 10l5-5 5 5 (from 7,10 up-left 5 to tip at 12,5, then down-right 5 to 17,10), horizontal base M4 19h16 (bottom bar from 4 to 20 at y:19). Set fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round". Reads as "submit upward" or "add account" — appropriate for sign-up and registration actions.

How do you create a pink gradient border glow on a glassmorphism button?

Set --accent:linear-gradient(135deg,#ec4899,#7c3aed,#06b6d4). Apply to ::before with mask-composite:exclude: 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. Set opacity:1 on :hover::before. Match the hover glow: box-shadow:0 0 18px rgba(236,72,153,0.55). Pink leads the gradient — placing the most vibrant color at top-left for maximum visual impact on hover approach.

How do you use sign-in and sign-up buttons together on an auth page?

Place both buttons side by side or on separate tabs. Matching glassmorphism base (backdrop-filter:blur(10px), rgba(255,255,255,0.06), border-radius:14px) makes them visually cohesive. The distinct gradient identities (indigo vs pink) let users distinguish actions by color. UX convention: cool/indigo for returning users (sign-in = familiar), warm/pink for new users (sign-up = opportunity). Both share identical sizing so they align perfectly without extra CSS.

How do you customize the loading label for different registration flows?

Change the three strings in the click listener: idle (label.textContent = 'Sign Up' in restore), loading (label.textContent = 'Creating Account...' on click), success (label.textContent = 'Welcome!' on complete). Examples: 'Register'→'Registering…'→'All Set!', 'Join Now'→'Joining…'→'You're In!', 'Get Started'→'Setting Up…'→'Ready!'. Adjust the 2000ms setTimeout to match your redirect timing — set to 0 if you redirect immediately on success.

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

Browse coodeverse.com/projects — Animated Sign-In Button (indigo gradient sibling), Stylish Animated Search Button, Enhanced Animated Refresh Button, Holographic Login (full auth page), and more. All 100% free with complete HTML CSS JavaScript source code.