CSS Animation Buttons, Links & Backgrounds Demo

Animated Buttons

Copy the .btn base styles and then pick one of the variants below (like .btn-glow). In your HTML, you’ll usually write something like: <button class="btn btn-glow">...</button>.

Glow Pulse Button

Soft sci-fi glow that gently pulses upward when you hover. Great for “Primary” actions.

Classes to use: class="btn btn-glow"

Sliding Gradient Button

Animated rainbow gradient that moves left to right on hover using @keyframes on the background position.

Classes to use: class="btn btn-gradient"

Neon Flicker Button

Cyberpunk sign-style flicker using animated text-shadow and opacity. Hover to turn on the effect.

Classes to use: class="btn btn-neon"

Bounce Button

Cartoon-like bounce when you hover, plus a “pressed” look when you click. Feels like a physical button.

Classes to use: class="btn btn-bounce"

Border Sweep Button

A shiny line “sweeps” across the border using ::before, while ::after keeps the inside dark.

Classes to use: class="btn btn-border"

Ripple Pulse Button

Uses a pulsing box-shadow to fake a green ripple around the button. Nice for “success” actions.

Classes to use: class="btn btn-ripple"

Tutorial idea: start with .btn only, then add one variant at a time and explain how the animation works (@keyframes, :hover, ::before, etc.).

Animated Links

Links use a base .fancy-link class plus one variant, for example: <a href="#" class="fancy-link link-underline-slide">Docs</a>. This keeps them easy to reuse in navigation bars, footers, or article text.

Underline Slide Link

A clean underline that slides in from left to right on hover using ::after. Good default for modern sites.

Classes to use: class="fancy-link link-underline-slide"

Read the Docs

Neon Glow Link

Glowing blue link that lights up like a neon sign when hovered, using text-shadow.

Classes to use: class="fancy-link link-neon-glow"

Join the Lobby

Brackets Reveal Link

Brackets slide in around the link text on hover using ::before and ::after. Great for menu items or filters.

Classes to use: class="fancy-link link-brackets"

View Leaderboard

Gradient Text Link

Text itself is a moving gradient. Uses -webkit-background-clip: text and a subtle position shift on hover.

Classes to use: class="fancy-link link-gradient-text"

Block Burner Blog

Dotted Underline Pulse Link

Classic dotted underline that changes color and gives a tiny bounce on hover. Ideal for in-text references.

Classes to use: class="fancy-link link-dotted-pulse"

See Documentation

Tutorial idea: start with plain <a> tags, then add .fancy-link, then layer each variant to teach pseudo-elements and hover transitions.

Animated Backgrounds

These are reusable background utilities for cards, hero sections, or panels. Use a base .bg-demo style while building, then move the variant class (like .bg-gradient-pan) onto your own container.

Gradient Pan Background

A slow-moving multi-color gradient. Great for hero sections or full-page backgrounds.

Classes to use: class="bg-gradient-pan" (optionally with your own sizing/radius)

Gradient Pan

Soft Radial Pulse Background

Multiple radial gradients that gently breathe in and out. Nice behind modals, cards, or dashboards.

Classes to use: class="bg-radial-pulse"

Radial Pulse

Diagonal Stripes Background

Animated diagonal stripes created with repeating-linear-gradient. Subtle motion for headers or code blocks.

Classes to use: class="bg-stripes"

Stripes

Twinkling Stars Background

Fake a star field with several small radial gradients and a subtle twinkle animation.

Classes to use: class="bg-stars"

Stars

Sheen Sweep Background

A light “sheen” sweeps across the surface using a ::before gradient. Good for cards or CTAs.

Classes to use: class="bg-sheen"

Sheen Sweep

Tutorial idea: show each background inside a fixed-height .bg-demo first, then apply the same class to a full-width section to demonstrate reuse.