A button that actually presses. 100% CSS, two styles, no JavaScript, no images, no dependencies.
Most "3D" CSS buttons move their shadow together with the cap, so the whole button appears to float. These are anchored:
- The cap rests on a hard edge, with a soft ambient shadow on the ground beneath it.
- On hover, the cap lifts one step while the edge and ground stay planted.
- On press, the cap travels down onto the edge. The base never moves, so your eye reads it as a real key being pushed, not a div being nudged.
The original JaydenART signature button, kept exactly as it was: warm copper highlight, glossy brown face, deep edge, compact press.
<link rel="stylesheet" href="JayButton.css">
<button class="jay-button-classic" type="button">Jayden Yoon ZK</button>The original .JayBrown class is still supported.
The newer layered component. Its cap moves independently while the edge and ground shadow stay planted, keeping the button dimensions stable through every state.
<button class="jay-button-studio" type="button">
<span class="jay-button-studio__cap">Start building</span>
</button>The version 2.0 class names (jay-button, jay-button__cap) remain supported, and data-tone="brown" gives Studio the Classic palette.
Override the component variables on the button or in your own class:
.my-button {
--jay-cap: #abcf37;
--jay-cap-hover: #b9dc49;
--jay-edge: #718a23;
--jay-ink: #10110d;
--jay-focus: #544741;
--jay-travel: 5px;
--jay-radius: 14px;
}| Variable | Purpose |
|---|---|
--jay-cap |
Resting cap color |
--jay-cap-hover |
Hover cap color |
--jay-edge |
Fixed edge color |
--jay-ink |
Label color |
--jay-focus |
Keyboard focus ring |
--jay-travel |
Press distance |
--jay-radius |
Cap and edge corner radius |
Both styles use native <button> elements with visible :focus-visible rings. Studio also ships disabled, reduced-motion, and forced-colors states. Keep the visible Studio label inside its cap element, and add an aria-label only when the visible text does not describe the action.
The anchored physics you see here now drive every button across Jayden's free browser tools, from WordPress maintenance to Unicode inspection.
npm test
npm run check
npm run serveThe test suite checks the public HTML and CSS contracts, both component aliases, accessibility states, local assets, security policy, and documentation hygiene.
Focused bug reports and pull requests are welcome. Read CONTRIBUTING.md before changing public behavior. Report security issues privately using SECURITY.md.
MIT. Built and maintained by JaydenART® Inc..