This checkout form surfaces a promo code entry inline, allowing users to apply discounts without leaving the flow.
HTML
<form class="checkout-promo">
<input
class="checkout-promo__input"
type="text"
placeholder="Promo code"
aria-label="Promo code"
/>
<button class="checkout-promo__apply" type="button">
Apply
</button>
<button class="checkout-promo__pay" type="submit">
Pay $39
</button>
</form>CSS
.checkout-promo {
width: 200px;
padding: 1rem;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 18px 36px rgba(0,0,0,0.14);
display: grid;
gap: 0.5rem;
text-align: center;
}
.checkout-promo__input {
padding: 0.45rem;
border-radius: 10px;
border: 1px solid #e5e7eb;
font-size: 12px;
text-align: center;
color: #111827;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.checkout-promo__input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99,102,241,0.25);
outline: none;
}
.checkout-promo__apply {
padding: 0.35rem;
border-radius: 999px;
border: none;
background: #f3f4f6;
font-size: 11px;
cursor: pointer;
transition: background 150ms ease, transform 150ms ease;
}
.checkout-promo__apply:hover {
background: #e0e7ff;
transform: translateY(-1px);
}
.checkout-promo__pay {
padding: 0.45rem;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #ffffff;
font-size: 12px;
cursor: pointer;
transition: transform 150ms ease, box-shadow 150ms ease;
}
.checkout-promo__pay:hover {
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(34,197,94,0.35);
}
@media (prefers-color-scheme: dark) {
.checkout-promo {
background: #111827;
color: #e5e7eb;
}
.checkout-promo__input {
background: #020617;
border-color: #374151;
color: #e5e7eb;
}
.checkout-promo__apply {
background: #1f2937;
color: #e5e7eb;
}
}Notes
- Inline discount application without flow break
- Encourages promo usage while maintaining momentum
- Ideal for SaaS upgrades and marketing-driven checkouts
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.