A real <button> carrying .btn-strawberry-milk — the preview is the stylesheet, not a picture of it.
.btn-strawberry-milk {
display: inline-block;
padding: 12px 28px;
border: 1px solid #fda4af;
border-radius: 999px;
background: linear-gradient(180deg, #fecdd3, #fff1f2);
color: #be123c;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: filter 0.2s ease, transform 0.15s ease;
}
.btn-strawberry-milk:hover {
filter: saturate(1.3);
transform: translateY(-1px);
}
.btn-strawberry-milk:active {
transform: translateY(0) scale(0.98);
}
.btn-strawberry-milk:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
Implementation notes
About the Strawberry Milk CSS button
Strawberry Milk uses a soft color treatment for friendly and approachable interfaces. Its pill silhouette makes the label easy to scan in compact layouts. It is built around a two-stop linear gradient anchored on #fecdd3 with a 200ms hover lift. The interaction stays intentionally restrained.
Usage
<button class="btn-strawberry-milk">Button</button>Pair it with the CSS tab above — the class is self-contained.
:focus-visible state. If you retain motion, include a prefers-reduced-motion override.- Built with
- HTML + plain CSS
- Shape
- Pill
- Exports
- CSS, Tailwind, React
- License
- MIT · commercial use
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.
Soft Bloom Smart Input
Soft Bloom kit
Soft Bloom Preference Toggle
Soft Bloom kit