Stateful Progress Button

A stateful progress button built with pure HTML and CSS that visually communicates progress readiness without JavaScript. This makes it easy to integrate into projects requiring lightweight UI feedback.

Usage

This button is suitable for interfaces where visual feedback during interactions improves clarity, such as form submissions or confirmation actions where the user should perceive activity.

Implementation

This component uses CSS transitions and pseudo-elements to simulate a progress effect when hovered or interacted with. It works without JavaScript and remains lightweight and simple to implement.

HTML

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

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

CSS

.btn-progress {
  width: 200px;
  padding: 0.75rem;
  border-radius: 11px;
  border: none;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.25);
  transform: translateX(-100%);
  transition: transform 300ms ease;
}

.btn-progress:hover::after {
  transform: translateX(0);
}

@media (prefers-color-scheme: dark) {
  .btn-progress {
    background: linear-gradient(90deg, #4ade80, #22c55e);
    color: #020617;
  }
}

.btn-progress {
  width: 200px;
  padding: 0.75rem;
  border-radius: 11px;
  border: none;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.25);
  transform: translateX(-100%);
  transition: transform 300ms ease;
}

.btn-progress:hover::after {
  transform: translateX(0);
}

@media (prefers-color-scheme: dark) {
  .btn-progress {
    background: linear-gradient(90deg, #4ade80, #22c55e);
    color: #020617;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Provides interaction feedback
• Works in modern browsers
• Ideal for buttons needing simple progress indication

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.