Pro preview
Modal82% match
Tactile Citrus Decision Modal
Tactile Citrus kit
orange palettesolid surface
Unlock with Pro →Theme
A real <button> carrying .btn-crayon-scribble — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-crayon-scribble {
display: inline-block;
padding: 12px 26px;
border: 3px solid #7c2d12;
outline: 2px dashed #c2410c;
outline-offset: 3px;
border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
background: #f97316;
color: #431407;
font-family: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
}
.btn-crayon-scribble:hover {
background: #ea580c;
transform: rotate(-1.5deg);
}
.btn-crayon-scribble:active {
background: #dc2626;
transform: rotate(1deg) scale(0.97);
}
.btn-crayon-scribble:focus-visible {
outline: 2px solid #7c2d12;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-crayon-scribble
PlayfulOrganic
Implementation notes
About the Crayon Scribble CSS button
Crayon Scribble uses expressive color, shape and feedback for characterful products. Its organic outline adds personality to the interaction. Its structure comes from a 3px border. The interaction stays intentionally restrained.
Usage
<button class="btn-crayon-scribble">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
- Organic
- 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.