Pro preview
Modal82% match
Tactile Citrus Decision Modal
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Theme
A real <button> carrying .btn-tag-label — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-tag-label {
display: inline-flex;
align-items: center;
padding: 12px 26px 12px 18px;
border: none;
border-radius: 999px 12px 12px 999px;
background: #f97316;
color: #431407;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.btn-tag-label::before {
content: "";
width: 9px;
height: 9px;
margin-right: 12px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.btn-tag-label:hover {
background: #ea580c;
}
.btn-tag-label:active {
background: #c2410c;
}
.btn-tag-label:focus-visible {
outline: 2px solid #f97316;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-tag-label
PlayfulAsymmetric
Implementation notes
About the Tag Label CSS button
Tag Label uses expressive color, shape and feedback for characterful products. Its asymmetric geometry creates a deliberate visual focal point. The interaction stays intentionally restrained.
Usage
<button class="btn-tag-label">Sale</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
- Asymmetric
- 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
Input82% match
Tactile Citrus Smart Input
Tactile Citrus kit
orange palettesolid surface
Pro preview
Toggle82% match
Tactile Citrus Preference Toggle
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Pro preview
Card82% match
Tactile Citrus Feature Card
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Pro preview
Dropdown82% match
Tactile Citrus Action Menu
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Pro preview
Form82% 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.