Animated Gradient Action Button

An animated gradient action button built with pure HTML and CSS that uses smooth color transitions to create dynamic visual motion, enhancing interaction without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where eye-catching action emphasis is needed, such as primary call-to-action buttons, promotional sections, or interactive UI elements that benefit from animated color feedback.

Implementation

The gradient animation is achieved using CSS keyframes, background positioning, and transitions, allowing colors to animate smoothly while keeping the component lightweight and reusable.

HTML

<button class="btn-gradient">
  Primary Action
</button>

<button class="btn-gradient">
  Primary Action
</button>

CSS

.btn-gradient {
  padding: 0.75rem 1.75rem;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(120deg, #6366f1, #22d3ee, #6366f1);
  background-size: 200% 200%;
  cursor: pointer;
  transition: background-position 400ms ease, transform 200ms ease;
}

.btn-gradient:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
}

.btn-gradient:focus-visible {
  outline: 3px solid rgba(255,255,255,0.6);
  outline-offset: 3px;
}

.btn-gradient {
  padding: 0.75rem 1.75rem;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(120deg, #6366f1, #22d3ee, #6366f1);
  background-size: 200% 200%;
  cursor: pointer;
  transition: background-position 400ms ease, transform 200ms ease;
}

.btn-gradient:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
}

.btn-gradient:focus-visible {
  outline: 3px solid rgba(255,255,255,0.6);
  outline-offset: 3px;
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses animated gradient color transitions
• Enhances visibility of primary actions
• Smooth, continuous motion without layout shift
• Works in modern browsers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.