CTA pill with flush button

Input + button as a single horizontal pill. The King Kong agency hero pattern.

CTAs Built JS-free

Use when — your hero asks for one specific input (URL, email, phone) before a CTA. The combined pill reads as one decisive action, not two steps. Don't use for forms that need more than one field.

Live demo

The trick: explicit equal heights

.hero-form { padding: 0 0 0 22px;  /* zero vertical padding */ }
.hf-input  { height: 46px;          /* explicit */ }
.hf-btn    { height: 46px;          /* same — this is what aligns them */ }

The mobile stack

@media (max-width: 520px) {
  .hero-form { flex-direction: column; border-radius: 18px; padding: 14px; }
  .hf-input, .hf-btn { width: 100%; }
}

Code playbook: vault/Topics/web-patterns.md § Pattern 4 (CTA pill with flush-aligned button).