Pro preview
Modal83% match
Midnight System Decision Modal
Midnight System kit
blue paletteDark UI character
Unlock with Pro →Theme
A real <button> carrying .btn-blueprint-trace — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-blueprint-trace {
display: inline-block;
padding: 12px 26px;
border: 1px solid #38bdf8;
border-radius: 6px;
outline: 1px dashed rgba(125, 211, 252, 0.55);
outline-offset: 4px;
background: rgba(56, 189, 248, 0.05);
color: #7dd3fc;
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.03em;
cursor: pointer;
transition: outline-offset 0.2s ease, background 0.2s ease;
}
.btn-blueprint-trace:hover {
outline-offset: 7px;
background: rgba(56, 189, 248, 0.12);
}
.btn-blueprint-trace:active {
outline-offset: 2px;
}
.btn-blueprint-trace:focus-visible {
outline: 2px solid #38bdf8;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-blueprint-trace
Implementation notes
About the Blueprint Trace CSS button
Blueprint Trace uses a lightweight treatment that keeps secondary actions visible. Its rounded corners balance product-friendly softness with a clear boundary. The border fx details are included in the copy-paste CSS.
Usage
<button class="btn-blueprint-trace">Button</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
Input83% match
Midnight System Smart Input
Midnight System kit
blue paletteDark UI character
Pro preview
Toggle83% match
Midnight System Preference Toggle
Midnight System kit
blue paletteDark UI character
Unlock with Pro →Pro preview
Card83% match
Midnight System Feature Card
Midnight System kit
blue paletteDark UI character
Unlock with Pro →Pro preview
Dropdown83% match
Midnight System Action Menu
Midnight System kit
blue paletteDark UI character
Unlock with Pro →Pro preview
Form83% match
Midnight System Signup Form
Midnight System kit
blue paletteDark UI character
Unlock with Pro →Get the complete Midnight System kit
Six coordinated component types, commercial license and future kit updates.