JaydenART® interface study

A button that actually presses.

The original JaydenART button and its newer layered companion, together in one tiny stylesheet. No JavaScript, no images, no frameworks. The theme toggle above is pure CSS; the only script on this page paints the sparkles that follow your cursor.

No requests, no analytics, no storage. The buttons are pure CSS, and the one small script here only draws cursor sparkles.

🎭 The styles

Both are real, native buttons. Hover, press, and tab to them.

JayButton Classic

The 2022 original, preserved exactly: glossy face, copper highlight, deep edge.

<button class='jay-button-classic'>
  Jayden Yoon ZK
</button>

JayButton Studio

The layered component. The cap travels; the edge and shadow stay planted.

<button class='jay-button-studio'>
  <span class='jay-button-studio__cap'>Press me</span>
</button>

🎨 Make it yours

Studio is driven by custom properties. Override them on any class, or use the built-in brown tone. The version 2.0 names still work, shown here.

Brown tone

<button class='jay-button' data-tone='brown'>
  <span class='jay-button__cap'>...</span>
</button>

Your palette

.demo-night {
  --jay-cap: #2c2c34;
  --jay-cap-hover: #3a3a44;
  --jay-edge: #101014;
  --jay-ink: #f3f0e9;
}

♿️ Accessibility, included

Keyboard

Native <button> elements with a visible focus ring. Tab to any button on this page to see it.

Disabled

Preferences

Reduced motion is honored: the press keeps its resting geometry and answers with shading. Forced-colors mode keeps a real border.

📦 Use it

Copy JayButton.css into your project. That is the whole install. The README documents every class and variable.

↑