How does glassmorphism work in CSS?

CSS glassmorphism creates a frosted-glass appearance using three properties together: (1) background: rgba(255,255,255,0.06) — a very low-opacity white background that lets the content behind show through with a faint white tint. The opacity value (0.04–0.12) controls how transparent the glass appears. (2) backdrop-filter: blur(10px) — blurs everything behind the element, creating the frosted effect. This is the key property — without it, the transparent background just shows the background clearly, not frosted. (3) border: 1px solid rgba(255,255,255,0.1) — a barely-visible white border that adds the glass edge illusion. Additional techniques: box-shadow with low-opacity dark shadows add depth. A dark or colorful background behind the glassmorphism element is essential — glassmorphism looks invisible on a white background. The logout button uses all three: rgba(255,255,255,0.06) background, backdrop-filter: blur(10px), and 1px solid rgba(255,255,255,0.1) border on a dark radial-gradient background.

How do you create a progress bar with JavaScript and CSS?

A JavaScript progress bar works by animating the width of a CSS element from 0% to 100%. CSS setup: .progress { position: absolute; bottom: 0; left: 0; height: 4px; width: 0%; background: gradient; transition: width 0.2s linear; } — transition on width makes each increment smooth. JavaScript: a recursive setTimeout function increments the width variable, sets progress.style.width = value + '%', and calls itself again after a delay until reaching 100%. In the logout button, simulate() adds 5 + Math.random() * 15 percent per 120ms call — the random increment creates a realistic non-linear progress that mimics real async operations (fast at first, then potentially slower). When p >= 100, the function stops recursing and triggers the completion state. Key insight: Math.min(100, p) prevents the width from exceeding 100% on the final frame. This pattern is the foundation for upload indicators, form submission feedback, file download progress, and any async operation that needs visual feedback.

What is the CSS shine sweep effect and how does it work?

The CSS shine sweep is a white light reflection effect that slides across a button on hover, simulating a glossy surface catching light. Implementation: a span element with 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). The gradient creates a transparent-to-white-to-transparent strip. skewX(-18deg) tilts it slightly for a realistic light angle. On hover, transition: 1s moves it from left: -120% to left: 130% — sweeping across the full button width and disappearing off the right edge. The overflow: hidden on the parent button clips the span so it's invisible outside the button bounds. The transition: 1s duration makes the sweep slow enough to notice but fast enough to feel responsive. Adjustments: change the rgba opacity for more or less intense shine, adjust skewX angle for different light angles, change transition duration for faster or slower sweeps.

How do you implement a JavaScript button state machine?

A button state machine manages UI changes through defined states with clear transitions. The logout button has three states: (1) idle — Log Out text + SVG icon visible, spinner hidden, progress at 0%. (2) loading — 'Logging Out...' text + spinner visible, icon hidden, progress bar animating from 0% to 100%. (3) complete — 'Logged Out' text, spinner hidden, progress bar resets. Then auto-transitions back to idle after 2000ms via setTimeout. Implementation: on click, update DOM for the loading state (textContent, style.display, style.width), start the simulate() progress function. When simulate() reaches 100%, update DOM for complete state. setTimeout for 2000ms then restores idle state. This pattern prevents double-clicks during loading (the button state itself signals it's busy), provides clear feedback at every stage, and auto-resets for re-use — a production-quality UX pattern used in login/logout flows, form submission buttons, and payment confirmation buttons across major applications.

How does the CSS spin animation work for a loading spinner?

A CSS spinner uses @keyframes to continuously rotate an element. @keyframes spin { to { transform: rotate(360deg); } }. The from state defaults to the element's current rotation (0deg), so only the to state is needed. Applied: .spinner { animation: spin 0.8s linear infinite; }. The spinner element itself is a circle with a partially transparent border: width: 18px; height: 18px; border: 3px solid rgba(255,255,255,0.2); border-top-color: white; border-radius: 50%. The full-opacity top border against the transparent rest creates the spinning arc effect. linear timing function is critical — ease or ease-in-out creates an unnatural acceleration/deceleration in a loop. The spinner is hidden by default (display: none) and shown via JavaScript (spinner.style.display = 'block') when the loading state begins, then hidden again when loading completes. SVG spinners can also be used for more complex animations, but the pure CSS border spinner is the most common approach due to its simplicity and zero-markup requirement.

How do you use CSS custom properties (CSS variables) effectively?

CSS custom properties (variables) are defined with -- prefix inside a :root selector and referenced with var(). In the logout button: :root { --bg: #0f172a; --accent: linear-gradient(135deg, #ef4444, #f97316, #facc15); --glass: rgba(255,255,255,0.06); --muted: #9fb3ca; }. Used as: background: var(--bg); background: var(--glass); background: var(--accent). Benefits: single source of truth — change --accent once to update all gradient uses simultaneously. Theming — swap the :root values to completely restyle. Inheritance — variables cascade through the DOM like other CSS properties. Dynamic updates — JavaScript can update CSS variables: document.documentElement.style.setProperty('--accent', 'blue'). Limitations: CSS variables cannot be used inside animation keyframes interpolation directly (they are treated as strings, not computed values). However, they work in all static property assignments. Best practice: put all design tokens (colors, spacing, typography scale, border-radius, shadows) in CSS custom properties at the top of your stylesheet.

How do you use recursive setTimeout for animations in JavaScript?

Recursive setTimeout is a pattern where a function calls setTimeout to schedule its own next execution, creating a controllable animation loop. Unlike setInterval, which fires on a fixed interval regardless of whether the previous execution completed, recursive setTimeout allows the delay to vary and the loop to stop cleanly. Pattern: function animate() { // update state; if (notDone) { setTimeout(animate, delay); } else { // cleanup } } animate(); In the logout button simulate(): function simulate() { p += 5 + Math.random() * 15; progress.style.width = Math.min(100, p) + '%'; if (p = 100. Each call schedules the next only if more progress is needed — clean, controllable, and garbage-collected automatically when finished. Compared to setInterval, this pattern avoids timer drift, makes it easy to stop (just don't recurse), and allows variable delays per step. It is the standard approach for progress bars, typewriter effects, animated counters, and any step-by-step visual update.

How do you show and hide elements with JavaScript?

The most common methods to show/hide elements with JavaScript: (1) style.display: element.style.display = 'none' hides it (removes from layout flow). element.style.display = 'block' (or 'flex', 'inline', etc.) shows it. This is the approach in the logout button — spinner.style.display = 'none' initially, then 'block' on loading. (2) classList.toggle('hidden'): define .hidden { display: none } in CSS, then toggle the class — cleaner separation of concerns. (3) style.visibility: 'hidden' hides but keeps layout space (element is invisible but still occupies space). (4) style.opacity: '0' makes transparent but keeps layout and interaction. For the logout button pattern, style.display is the right choice because the spinner and icon need to appear/disappear without affecting layout (they are flex children with gap, so removing one collapses the gap naturally). (5) setAttribute('hidden', ''): uses the HTML hidden attribute. removeAttribute('hidden') shows it. The best approach for new code is classList.toggle with a utility class — it keeps styles in CSS where they belong and makes the JavaScript intent clear.

What CSS and JavaScript skills does the animated logout button project teach?

The animated logout button teaches ten advanced skills across CSS and JavaScript. CSS skills: (1) Glassmorphism — backdrop-filter: blur() combined with rgba background and subtle border. (2) Radial gradient background — compositing multiple radial-gradient() layers with custom positions and spreads. (3) CSS custom properties — :root variable definitions and var() references for a design token system. (4) Gradient border with mask — ::before pseudo-element with background gradient and mask-composite: exclude to show only the border area. (5) Shine sweep animation — absolutely positioned span with skewX and left transition. (6) CSS spinner — @keyframes spin with border-top-color technique. JavaScript skills: (7) Multi-element DOM references — getElementById for button, progress, label, icon, spinner. (8) Button state machine — three named states (idle, loading, complete) with explicit DOM updates at each transition. (9) Recursive setTimeout progress simulation — non-linear progress increment with Math.random(), Math.min() clamping, and auto-stop when complete. (10) Auto-reset pattern — setTimeout after completion to restore idle state without user interaction. These ten skills collectively describe intermediate-level frontend development competency.

Animated Logout Button | Gradient Border Glow Progress Bar Spinner Glassmorphism Free HTML CSS JS 2025

About This Project

The Coodeverse animated logout button is one of the most technically sophisticated single-component projects in the library. In 40 lines of CSS and 20 lines of JavaScript, it demonstrates five professional-grade UI techniques that collectively represent intermediate frontend development competency: glassmorphism with backdrop-filter, the CSS gradient border mask technique, a shine sweep animation, a progress bar with simulated async progress, and a three-state JavaScript button state machine. Every technique is immediately applicable to real-world dashboard interfaces, authentication flows, and product applications.

The CSS gradient border technique is the most advanced concept in this project — and one of the most searched CSS questions on the internet. Standard CSS borders only support solid colors. To achieve a multicolor gradient border, the project uses a ::before pseudo-element that is 2px larger than the button in all directions (inset: -2px), with padding: 2px creating the 2px border frame. The background is set to the full gradient. The CSS mask property with two layers — mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) — combined with mask-composite: exclude makes the content box area transparent (hiding the gradient in the center) while the padding area (the 2px frame) remains visible (showing the gradient border). The webkit prefix -webkit-mask-composite: xor provides cross-browser support. The ::before starts at opacity: 0 and transitions to opacity: 1 on hover — the gradient border appears on mouse-over with a smooth 0.4s fade.

The JavaScript state machine is the central learning moment in the JavaScript portion. Many beginner JavaScript projects handle interactions with ad-hoc if/else checks on individual DOM elements. The logout button instead manages all DOM changes through explicit state transitions: idle (initial state) → loading (triggered by click) → complete (triggered by simulate() reaching 100%) → idle (triggered by auto-reset setTimeout after 2000ms). Each state transition is a single block of DOM updates: display changes on icon and spinner, textContent on the label, width on the progress bar. This named-state approach is the same architectural pattern used by React's useState, XState's state machines, and every modern frontend framework — understanding it in 20 lines of vanilla JavaScript is more valuable than reading framework documentation in isolation.

The progress bar uses a recursive setTimeout pattern rather than setInterval. On each 120ms call, simulate() adds 5 + Math.random() * 15 percent — the random component creates realistic non-linear progress where the bar sometimes advances quickly and sometimes slows down, mimicking real async operations like file uploads or API requests that have variable throughput. Math.min(100, p) clamps the value at 100% to prevent overflow. The recursion stops when p >= 100, triggering the completion state. This clean stopping condition is the primary advantage of recursive setTimeout over setInterval, which requires an explicit clearInterval() call.

Frequently Asked Questions

How does the CSS gradient border technique work?

A ::before pseudo-element is sized 2px larger than the button with inset: -2px and padding: 2px. The full gradient fills the ::before. CSS mask with mask-composite: exclude makes the content box transparent, showing only the 2px padding frame — creating a gradient border ring. Opacity transitions from 0 to 1 on hover.

What is glassmorphism in CSS?

Glassmorphism combines background: rgba(255,255,255,0.06) (low-opacity white), backdrop-filter: blur(10px) (frosted blur of content behind), and a subtle border: 1px solid rgba(255,255,255,0.1). A dark or colorful background is required — glassmorphism is invisible on white.

How does the JavaScript state machine work?

Three states: idle (icon + Log Out), loading (spinner + Logging Out... + progress bar), complete (Logged Out + auto-reset). The recursive simulate() function increments progress with random amounts until 100%, then triggers the completion state.

Is Coodeverse free?

Yes — all projects, courses, compilers, and articles are completely free with no paywall, no subscription, and no login required, forever.

All Free Projects — Coodeverse

Related Free Courses

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 Log Out Button</title>
</head>
<body> <button class="logout-btn" id="logoutBtn"> <svg id="logoutIcon" width="20" height="20" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 17l5-5-5-5"/> <path d="M4 12h12"/> <path d="M8 5v14"/> </svg> <div class="spinner" id="spinner"></div> <span id="labelText">Log Out</span> <span class="shine"></span> <div class="progress" id="progress"></div> </button> </body>
</html>

/* ── CSS CUSTOM PROPERTIES (Design Tokens) ────────────────── */
:root{
  --bg: #0f172a;                                         /* Dark navy background */
  --accent: linear-gradient(135deg, #ef4444, #f97316, #facc15); /* Red→orange→yellow gradient */
  --glass: rgba(255,255,255,0.06);                       /* Very faint white for glassmorphism */
  --muted: #9fb3ca;                                      /* Muted blue-grey text */
}

/* ── BACKGROUND ───────────────────────────────────────────── */
body{
  margin: 0; font-family: Inter, sans-serif; height: 100vh;
  /* Two radial gradients layered over the solid dark base color */
  background:
    radial-gradient(circle at 20% 20%, rgba(239,68,68,0.15), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(250,204,21,0.15), transparent 50%),
    var(--bg);
  display: flex; justify-content: center; align-items: center; color: white;
}

/* ── BUTTON BASE (Glassmorphism) ──────────────────────────── */
.logout-btn{
  position: relative;                /* Required for ::before and absolute children */
  padding: 16px 34px;
  font-size: 17px; font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  background: var(--glass);          /* Frosted glass background */
  border: 1px solid rgba(255,255,255,0.1); /* Barely-visible glass edge */
  backdrop-filter: blur(10px);       /* KEY: blurs content behind for frost effect */
  display: flex; align-items: center; gap: 12px;
  overflow: hidden;                  /* Clips shine span and progress bar */
  transition: 0.25s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
}
.logout-btn:hover{
  transform: translateY(-4px) scale(1.03); /* Lift + slight enlarge */
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 18px rgba(239,68,68,0.55); /* Red glow on hover */
}

/* ── GRADIENT BORDER (CSS Mask Technique) ────────────────── */
/* ::before is 2px larger than the button in all directions   */
/* Its background is the full accent gradient                 */
/* The mask makes the center transparent, showing only the   */
/* 2px padding frame — creating a gradient border ring       */
.logout-btn::before{
  content: "";
  position: absolute;
  inset: -2px;            /* Extends 2px outside button in all directions */
  border-radius: inherit; /* Matches parent border-radius */
  padding: 2px;           /* Creates the 2px visible border frame */
  background: var(--accent); /* Gradient fills the entire ::before */
  /* Mask: content-box layer = transparent center; border area = visible */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;    /* WebKit (Safari/Chrome) prefix */
  mask-composite: exclude;        /* Standard: makes center transparent */
  opacity: 0;             /* Hidden by default */
  transition: 0.4s ease;
}
.logout-btn:hover::before{ opacity: 1; } /* Reveal gradient border on hover */

/* ── SHINE SWEEP ──────────────────────────────────────────── */
.shine{
  position: absolute;
  top: 0; left: -120%;         /* Starts off-screen to the left */
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-18deg);    /* Tilt for realistic light angle */
  transition: 1s;              /* Slow sweep feels cinematic */
  pointer-events: none;        /* Don't block clicks */
}
.logout-btn:hover .shine{ left: 130%; } /* Sweep to off-screen right on hover */

/* ── LOADING SPINNER ──────────────────────────────────────── */
.spinner{
  width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,0.2); /* Faint full ring */
  border-top-color: white;                 /* Bright arc for spin illusion */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;   /* linear = constant speed (no easing) */
  display: none;                           /* Hidden until JS shows it */
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.progress{
  position: absolute; bottom: 0; left: 0;
  height: 4px; width: 0%;       /* JS animates width from 0% to 100% */
  background: var(--accent);    /* Matches gradient border */
  transition: width .2s linear; /* Smooths each width increment */
}

// ── DOM REFERENCES ──────────────────────────────────────────
const btn      = document.getElementById('logoutBtn');
const progress = document.getElementById('progress');
const label    = document.getElementById('labelText');
const icon     = document.getElementById('logoutIcon');
const spinner  = document.getElementById('spinner');

// ── CLICK EVENT — Triggers Loading State ────────────────────
btn.addEventListener('click', () => {

  // ── STATE: LOADING ──────────────────────────────────────
  label.textContent       = 'Logging Out...'; // Update button label
  icon.style.display      = 'none';           // Hide SVG logout icon
  spinner.style.display   = 'block';          // Show spinner

  // ── PROGRESS BAR SIMULATION ──────────────────────────────
  // Recursive setTimeout (not setInterval) — stops cleanly when done
  let p = 0; // Progress percentage (0–100)

  function simulate() {
    // Random increment: 5–20% per step — non-linear, realistic
    p += 5 + Math.random() * 15;

    // Math.min prevents exceeding 100% on final step
    progress.style.width = Math.min(100, p) + '%';

    if (p < 100) {
      // Still in progress — schedule next call in 120ms
      setTimeout(simulate, 120);
    } else {
      // ── STATE: COMPLETE ──────────────────────────────────
      label.textContent     = 'Logged Out';
      spinner.style.display = 'none';
      progress.style.width  = '0%'; // Reset bar

      // ── AUTO-RESET to IDLE after 2 seconds ───────────────
      setTimeout(() => {
        label.textContent    = 'Log Out';
        icon.style.display   = 'block'; // Restore SVG icon
      }, 2000);
    }
  }

  simulate(); // Kick off the progress simulation
});