Directional Fill Action Button

A directional fill action button built with pure HTML and CSS that animates a fill effect based on hover direction, providing intuitive visual feedback without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where direction-aware interaction feedback enhances clarity, such as call-to-action buttons, navigation controls, or interactive UI elements.

Implementation

The directional fill effect is achieved using CSS transitions and pseudo-elements, allowing the animation to respond to cursor direction while keeping the implementation lightweight and reusable.

HTML

<button class="btn-directional">
  Submit
</button>

<button class="btn-directional">
  Submit
</button>

CSS

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

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

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

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

@media (prefers-color-scheme: dark) {
  .btn-directional {
    background: #020617;
    color: #e5e7eb;
  }
}

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

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

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

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

@media (prefers-color-scheme: dark) {
  .btn-directional {
    background: #020617;
    color: #e5e7eb;
  }
}

Notes

• Built using pure HTML and CSS
• No JavaScript required
• Supports direction-based fill animation
• Enhances interaction clarity with motion cues
• Smooth and lightweight animation
• Works across 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.