Large button

Hero-scale buttons with generous padding and larger type — ideal for primary calls-to-action.

Widely Supported

uino-js

Quick implementation

.btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 700;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Primary variant */
.btn-lg--primary {
  background: var(--accent-bg);
  color: oklch(1 0 0);
}
.btn-lg--primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Secondary variant */
.btn-lg--secondary {
  background: oklch(0.28 0.03 260);
  color: var(--text);
}
.btn-lg--secondary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a landing page design system.

Goal: A reusable large button style (.btn-lg) for hero sections and primary CTAs — no JavaScript.

Technical constraints:
- Use padding: 0.75rem 2rem and font-size: 1.1rem for the large scale.
- Use font-weight: 700 and letter-spacing: -0.01em for a strong, polished look.
- Use border-radius: var(--radius-lg) to inherit the design system's large radius token.
- Use oklch() for all color values, not hex or rgba().
- Support primary and secondary variants.
- Hover state should use translateY(-1px) with opacity for a subtle lift — no box-shadow changes.

Framework variant (pick one):
A) Vanilla CSS modifier classes (.btn-lg--primary, .btn-lg--secondary).
B) React component — accept variant and size as optional props, defaulting to large.

Edge cases to handle:
- Full-width variant: add a .btn-lg--full modifier with width: 100%.
- Ensure the button doesn't grow taller when used inside flex or grid containers.
- Maintain readable contrast ratio on both dark and light backgrounds.

Return CSS.

Why this matters in 2026

Hero sections and landing pages live or die by their primary CTA. A large, well-spaced button draws the eye and invites interaction — but poorly sized buttons feel heavy and misaligned with the surrounding type scale. A dedicated .btn-lg class encodes the hero scale in one place, so it stays consistent across pages without repeating padding and font-size overrides in every component.

The logic

padding: 0.75rem 2rem gives a tall, wide tap target appropriate for a focal element on the page. font-size: 1.1rem with letter-spacing: -0.01em and font-weight: 700 produces a compact, confident label that reads well at display scale. The transform: translateY(-1px) on hover adds a micro-lift cue without requiring a box-shadow repaint — only the transform composite layer updates, keeping interactions at 60 fps.

Accessibility & performance

Large buttons naturally satisfy WCAG 2.5.5 minimum target size (44×44px), but confirm the contrast ratio between oklch(1 0 0) text and your --accent-bg meets the 4.5:1 text contrast requirement. Add :focus-visible with an outline that is visually distinct from the button background. The translateY and opacity transitions are compositor-only — they do not trigger layout or paint recalculations.