State Fill Confirmation Button

A state fill confirmation button built with pure HTML and CSS that visually confirms user actions by filling the button state, without relying on JavaScript or external libraries.

Usage

This component is suitable for interfaces where interaction feedback and confirmation are required after a user action, such as submitting a form, confirming a choice, or completing a step.

Implementation

The fill confirmation effect is created using CSS transitions and pseudo-elements to provide a lightweight UI feedback pattern without JavaScript.

HTML

<button class="btn-fill">
  Confirm
</button>

<button class="btn-fill">
  Confirm
</button>

CSS

.btn-fill {
  width: 200px;
  padding: 0.75rem;
  border-radius: 11px;
  border: 1px solid #334155;
  background: transparent;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.btn-fill:hover {
  background: #6366f1;
  color: #ffffff;
}

.btn-fill {
  width: 200px;
  padding: 0.75rem;
  border-radius: 11px;
  border: 1px solid #334155;
  background: transparent;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.btn-fill:hover {
  background: #6366f1;
  color: #ffffff;
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Provides visual interaction confirmation feedback
• Uses state fill animation to indicate completion
• Works in modern browsers
• Ideal for confirming user actions

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.