Equalized Action Row

An equalized action row built with pure HTML and CSS that ensures every action element shares the same width, height, and visual importance, creating a balanced and predictable interaction area without relying on JavaScript.

Usage

This component is ideal for interfaces where choices should feel equally important, such as confirmation dialogs, filter options, settings toggles, pricing comparisons, or decision based actions where no single option should dominate visually.

Implementation

The row is implemented using CSS Flexbox with equal flex growth, consistent padding, and alignment rules, allowing each action item to scale evenly while remaining responsive across different screen sizes.

HTML

<div class="flex-equal">
  <button>Save</button>
  <button>Cancel</button>
</div>

<div class="flex-equal">
  <button>Save</button>
  <button>Cancel</button>
</div>

CSS

.flex-equal {
  width: 200px;
  display: flex;
  gap: 0.5rem;
}

.flex-equal button {
  flex: 1;
  padding: 0.45rem;
  border-radius: 10px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.flex-equal button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(99,102,241,0.35);
}

@media (prefers-color-scheme: dark) {
  .flex-equal button {
    background: #818cf8;
    color: #020617;
  }
}

.flex-equal {
  width: 200px;
  display: flex;
  gap: 0.5rem;
}

.flex-equal button {
  flex: 1;
  padding: 0.45rem;
  border-radius: 10px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.flex-equal button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(99,102,241,0.35);
}

@media (prefers-color-scheme: dark) {
  .flex-equal button {
    background: #818cf8;
    color: #020617;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Gives all actions equal size and emphasis
• Prevents visual bias toward any single option
• Handles varying label lengths cleanly
• Designed for decision oriented UI sections

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.