Directional Sweep Action Button

A directional sweep action button built with pure HTML and CSS that adds interactive visual feedback by animating a sweep effect based on user interaction, without relying on JavaScript or external libraries.

Usage

This component is suitable for interfaces where interactive hover feedback improves clarity and engagement, such as call-to-action buttons, navigation actions, or interactive UI elements.

Implementation

The sweep effect is created using CSS transitions and pseudo-elements, allowing the animation to respond smoothly to user interaction while keeping the implementation lightweight and reusable.

HTML

<button class="btn-sweep">
  Continue
</button>

<button class="btn-sweep">
  Continue
</button>

CSS

.btn-sweep {
  width: 200px;
  padding: 0.75rem;
  border-radius: 11px;
  border: none;
  background: #00ADB5;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  transform: translateX(-100%);
  transition: transform 220ms ease;
}

.btn-sweep:hover::before {
  transform: translateX(0);
}

.btn-sweep span,
.btn-sweep {
  position: relative;
  z-index: 1;
}

.btn-sweep {
  width: 200px;
  padding: 0.75rem;
  border-radius: 11px;
  border: none;
  background: #00ADB5;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  transform: translateX(-100%);
  transition: transform 220ms ease;
}

.btn-sweep:hover::before {
  transform: translateX(0);
}

.btn-sweep span,
.btn-sweep {
  position: relative;
  z-index: 1;
}

Notes

• Built using pure HTML and CSS
• No JavaScript required for interaction
• Displays direction-aware hover animation
• Enhances user interaction through visual motion cues
• Smooth transition without performance overhead
• Works reliably 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.