Pro preview
Modal87% match
Tactile Citrus Decision Modal
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Theme
A real <button> carrying .btn-spark-burst — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-spark-burst {
position: relative;
display: inline-block;
padding: 12px 28px;
border: none;
border-radius: 12px;
background: #f59e0b;
color: #451a03;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
.btn-spark-burst::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: transparent;
transform: translate(-50%, -50%);
pointer-events: none;
}
.btn-spark-burst:hover {
background: #d97706;
}
.btn-spark-burst:active {
transform: scale(0.96);
}
.btn-spark-burst:active::after {
animation: btn-spark-burst-pop 0.5s ease-out forwards;
}
@keyframes btn-spark-burst-pop {
0% {
box-shadow: 0 0 0 2px #fde68a, 0 0 0 2px #fde68a, 0 0 0 2px #fde68a, 0 0 0 2px #fde68a, 0 0 0 2px #fde68a, 0 0 0 2px #fde68a, 0 0 0 2px #fde68a, 0 0 0 2px #fde68a;
}
100% {
box-shadow: 0 -30px 0 -4px rgba(251, 191, 36, 0), 22px -22px 0 -4px rgba(251, 191, 36, 0), 30px 0 0 -4px rgba(251, 191, 36, 0), 22px 22px 0 -4px rgba(251, 191, 36, 0), 0 30px 0 -4px rgba(251, 191, 36, 0), -22px 22px 0 -4px rgba(251, 191, 36, 0), -30px 0 0 -4px rgba(251, 191, 36, 0), -22px -22px 0 -4px rgba(251, 191, 36, 0);
}
}
.btn-spark-burst:focus-visible {
outline: 2px solid #f59e0b;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-spark-burst
Implementation notes
About the Spark Burst CSS button
Spark Burst uses expressive color, shape and feedback for characterful products. Its rounded corners balance product-friendly softness with a clear boundary. Motion comes from a 500ms keyframe animation. The particles details are included in the copy-paste CSS.
Usage
<button class="btn-spark-burst">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
Input87% match
Tactile Citrus Smart Input
Tactile Citrus kit
orange palettesolid surface
Pro preview
Toggle87% match
Tactile Citrus Preference Toggle
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Pro preview
Card87% match
Tactile Citrus Feature Card
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Pro preview
Dropdown87% match
Tactile Citrus Action Menu
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Pro preview
Form87% match
Tactile Citrus Signup Form
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Get the complete Tactile Citrus kit
Six coordinated component types, commercial license and future kit updates.