Pro preview
Modal86% match
Midnight System Decision Modal
Midnight System kit
Dark UI characterblue palette
Unlock with Pro →Theme
A real <button> carrying .btn-midnight-cta — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-midnight-cta {
display: inline-block;
padding: 14px 32px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #0ea5e9, #6366f1);
color: #ffffff;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 28px rgba(78, 118, 240, 0.45);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-midnight-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(78, 118, 240, 0.6);
}
.btn-midnight-cta:active {
transform: translateY(0);
box-shadow: 0 4px 14px rgba(78, 118, 240, 0.45);
}
.btn-midnight-cta:focus-visible {
outline: 2px solid #0ea5e9;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-midnight-cta
Dark UIRounded
Implementation notes
About the Midnight CTA CSS button
Midnight CTA uses controlled contrast and elevation tuned for dark product surfaces. Its rounded corners balance product-friendly softness with a clear boundary. It is built around a two-stop linear gradient anchored on #0ea5e9 with a 200ms hover lift. The interaction stays intentionally restrained.
Usage
<button class="btn-midnight-cta">Get Started</button>Pair it with the CSS tab above — the class is self-contained.
Before shipping: keep the semantic button element, verify contrast on your actual background and add a visible
:focus-visible state. If you retain motion, include a prefers-reduced-motion override.- Built with
- HTML + plain CSS
- Shape
- Rounded
- Exports
- CSS, Tailwind, React
- License
- MIT · commercial use
Complete the look
Build the interface around this button
We matched its palette, surface, geometry and motion to a complete UI system — like composing an outfit, not browsing unrelated parts.
Style DNA · v1
How matching works →Free sample
Input86% match
Midnight System Smart Input
Midnight System kit
Dark UI characterblue palette
Pro preview
Toggle86% match
Midnight System Preference Toggle
Midnight System kit
Dark UI characterblue palette
Unlock with Pro →Pro preview
Card86% match
Midnight System Feature Card
Midnight System kit
Dark UI characterblue palette
Unlock with Pro →Pro preview
Dropdown86% match
Midnight System Action Menu
Midnight System kit
Dark UI characterblue palette
Unlock with Pro →Pro preview
Form86% match
Midnight System Signup Form
Midnight System kit
Dark UI characterblue palette
Unlock with Pro →Get the complete Midnight System kit
Six coordinated component types, commercial license and future kit updates.