-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
207 lines (198 loc) · 18.4 KB
/
Copy pathindex.html
File metadata and controls
207 lines (198 loc) · 18.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<!-- JayButton by JaydenART. Released under JaydenART® Inc., JaydenART® Tech Inc., JaydenART® Creatives Inc. Designed by Jayden Yoon ZK. MIT License, keep the notice: https://github.com/JaydenART/JaydenART_Realistic_3D_CSS_Button -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'; script-src 'self'; img-src 'self' data:; base-uri 'none'; form-action 'none'">
<title>Realistic 3D CSS Button by JaydenART</title>
<meta name="description" content="Two dependency-free CSS button styles by JaydenART: the original glossy Classic and the accessible layered Studio. Pure CSS buttons on a page that stays offline: no requests, no analytics, no storage.">
<link rel="canonical" href="https://jaydenart.github.io/JaydenART_Realistic_3D_CSS_Button/">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 725.7 725.7'%3E%3Cpath fill='%23abcf37' d='M705.7,725.7H20c-11,0-20-9-20-20V20C0,9,9,0,20,0h685.7c11,0,20,9,20,20v685.7c0,11-9,20-20,20Z'/%3E%3Cpath fill='%23fff' d='M70.2,100.9v450c0,19.4,16.7,34.5,35.9,32.3,56-6.2,157.2-31.6,157.2-105.3,0-44.8-.4-69.9-.2-103.9.1-17.7,14.4-31.9,32.1-31.9h134.2c18.3,0,33.1,14.8,33.1,33.1v129.2s0,151.2-132.2,151.2c0,0,325.1,11.5,325.1-160.7V101.6c0-17.3-14.1-31.4-31.4-31.4H100.9c-17,0-30.7,13.7-30.7,30.7Z'/%3E%3C/svg%3E">
<meta property="og:title" content="Realistic 3D CSS Button by JaydenART">
<meta property="og:description" content="A button that actually presses. Two styles, pure CSS, zero dependencies.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jaydenart.github.io/JaydenART_Realistic_3D_CSS_Button/">
<meta property="og:image" content="https://jaydenart.github.io/JaydenART_Realistic_3D_CSS_Button/assets/social-preview.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="640">
<meta property="og:image:alt" content="JayButton Classic and JayButton Studio on a dark panel">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Realistic 3D CSS Button by JaydenART">
<meta name="twitter:description" content="A button that actually presses. Pure CSS, two styles, zero dependencies.">
<meta name="twitter:image" content="https://jaydenart.github.io/JaydenART_Realistic_3D_CSS_Button/assets/social-preview.png">
<link rel="stylesheet" href="JayButton.css?v=2.5.1">
<link rel="stylesheet" href="demo.css?v=2.5.1">
<script src="demo.js?v=2.5.1" defer></script>
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<input type="checkbox" id="theme-flip" class="theme-flip" aria-label="Switch color theme">
<div class="page">
<div class="bg-scene" aria-hidden="true">
<span class="star s1"></span><span class="star s2"></span><span class="star s3"></span>
<span class="star s4"></span><span class="star s5"></span><span class="star s6"></span>
<span class="star s7"></span><span class="star s8"></span>
<div class="muse m-art p1"><svg viewBox="0 0 64 64"><path d="M32 8c14 0 24 9 24 20 0 8-6 11-12 11h-6c-3 0-5 2-5 5 0 2 1 3 1 5 0 4-3 7-8 7C15 56 8 45 8 32 8 18 19 8 32 8Z" fill="none" stroke="currentColor" stroke-width="2.4"/><circle cx="22" cy="24" r="3.2" fill="currentColor"/><circle cx="34" cy="19" r="3.2" fill="currentColor"/><circle cx="44" cy="27" r="3.2" fill="currentColor"/><circle cx="19" cy="36" r="3.2" fill="currentColor"/></svg></div>
<div class="muse m-film p2"><svg viewBox="0 0 64 64"><rect x="10" y="14" width="44" height="36" rx="6" fill="none" stroke="currentColor" stroke-width="2.4"/><rect x="20" y="22" width="24" height="20" rx="3" fill="none" stroke="currentColor" stroke-width="2.2"/><circle cx="15" cy="20" r="1.8" fill="currentColor"/><circle cx="15" cy="28" r="1.8" fill="currentColor"/><circle cx="15" cy="36" r="1.8" fill="currentColor"/><circle cx="15" cy="44" r="1.8" fill="currentColor"/><circle cx="49" cy="20" r="1.8" fill="currentColor"/><circle cx="49" cy="28" r="1.8" fill="currentColor"/><circle cx="49" cy="36" r="1.8" fill="currentColor"/><circle cx="49" cy="44" r="1.8" fill="currentColor"/></svg></div>
<div class="muse m-music p3"><svg viewBox="0 0 64 64"><path d="M24 46V14l24-5v30" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><ellipse cx="18" cy="47" rx="6.5" ry="5" fill="none" stroke="currentColor" stroke-width="2.4"/><ellipse cx="42" cy="40" rx="6.5" ry="5" fill="none" stroke="currentColor" stroke-width="2.4"/></svg></div>
<div class="muse m-fashion p4"><svg viewBox="0 0 64 64"><path d="M32 14a5 5 0 1 1 5-5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><path d="M32 14 8 40c-2 2 0 6 3 6h42c3 0 5-4 3-6L32 14Z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/></svg></div>
<div class="muse m-tech p5"><svg viewBox="0 0 64 64"><path d="M24 18 10 32l14 14M40 18l14 14-14 14" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M35 12 29 52" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/></svg></div>
<div class="muse far m-film q1"><svg viewBox="0 0 64 64"><rect x="10" y="14" width="44" height="36" rx="6" fill="none" stroke="currentColor" stroke-width="2.4"/><rect x="20" y="22" width="24" height="20" rx="3" fill="none" stroke="currentColor" stroke-width="2.2"/><circle cx="15" cy="20" r="1.8" fill="currentColor"/><circle cx="15" cy="28" r="1.8" fill="currentColor"/><circle cx="15" cy="36" r="1.8" fill="currentColor"/><circle cx="15" cy="44" r="1.8" fill="currentColor"/><circle cx="49" cy="20" r="1.8" fill="currentColor"/><circle cx="49" cy="28" r="1.8" fill="currentColor"/><circle cx="49" cy="36" r="1.8" fill="currentColor"/><circle cx="49" cy="44" r="1.8" fill="currentColor"/></svg></div>
<div class="muse far m-music q2"><svg viewBox="0 0 64 64"><path d="M24 46V14l24-5v30" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><ellipse cx="18" cy="47" rx="6.5" ry="5" fill="none" stroke="currentColor" stroke-width="2.4"/><ellipse cx="42" cy="40" rx="6.5" ry="5" fill="none" stroke="currentColor" stroke-width="2.4"/></svg></div>
<div class="muse far m-talent q3"><svg viewBox="0 0 64 64"><path d="M32 6 38 26 58 32 38 38 32 58 26 38 6 32 26 26 Z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/></svg></div>
<div class="muse far m-art q4"><svg viewBox="0 0 64 64"><path d="M32 8c14 0 24 9 24 20 0 8-6 11-12 11h-6c-3 0-5 2-5 5 0 2 1 3 1 5 0 4-3 7-8 7C15 56 8 45 8 32 8 18 19 8 32 8Z" fill="none" stroke="currentColor" stroke-width="2.4"/><circle cx="22" cy="24" r="3.2" fill="currentColor"/><circle cx="34" cy="19" r="3.2" fill="currentColor"/><circle cx="44" cy="27" r="3.2" fill="currentColor"/><circle cx="19" cy="36" r="3.2" fill="currentColor"/></svg></div>
<div class="muse far m-fashion q5"><svg viewBox="0 0 64 64"><path d="M32 14a5 5 0 1 1 5-5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><path d="M32 14 8 40c-2 2 0 6 3 6h42c3 0 5-4 3-6L32 14Z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/></svg></div>
<div class="muse far m-tech q6"><svg viewBox="0 0 64 64"><path d="M24 18 10 32l14 14M40 18l14 14-14 14" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M35 12 29 52" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/></svg></div>
<div class="muse m-talent p6"><svg viewBox="0 0 64 64"><path d="M32 6 38 26 58 32 38 38 32 58 26 38 6 32 26 26 Z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/></svg></div>
</div>
<nav class="site-nav" aria-label="Page navigation">
<div class="wrap bar">
<a class="brand" href="https://www.JaydenART.com" aria-label="JaydenART">
<svg class="wordmark" viewBox="0 0 4098.22 725.7" aria-hidden="true" focusable="false">
<path fill="#abcf37" d="M705.7,725.7H20c-11,0-20-9-20-20V20C0,9,9,0,20,0h685.7c11,0,20,9,20,20v685.7c0,11-9,20-20,20Z"/>
<path fill="#fff" d="M70.2,100.9v450c0,19.4,16.7,34.5,35.9,32.3,56-6.2,157.2-31.6,157.2-105.3,0-44.8-.4-69.9-.2-103.9.1-17.7,14.4-31.9,32.1-31.9h134.2c18.3,0,33.1,14.8,33.1,33.1v129.2s0,151.2-132.2,151.2c0,0,325.1,11.5,325.1-160.7V101.6c0-17.3-14.1-31.4-31.4-31.4H100.9c-17,0-30.7,13.7-30.7,30.7Z"/>
<path fill="#a9cf39" d="M444.6,263.8h-163.4c-9.9,0-18-8.1-18-18v-79.5c0-9.9,8.1-18,18-18h163.4c9.9,0,18,8.1,18,18v79.5c0,9.9-8.1,18-18,18Z"/>
<path fill="#fff" d="M388.8,206.2c0,15.6-12.2,27.8-28.1,27.8s-28.3-12.2-28.3-27.8,12.6-27.5,28.3-27.5c15.9.1,28.1,12.3,28.1,27.5ZM339.4,206.2c0,12.2,9,21.9,21.4,21.9s20.9-9.7,20.9-21.8-8.9-22.1-21.1-22.1-21.2,9.9-21.2,22h0ZM356.3,220.6h-6.4v-27.5c2.5-.5,6-.8,10.6-.8,5.2,0,7.5.8,9.5,2,1.5,1.2,2.7,3.3,2.7,6,0,3-2.3,5.4-5.7,6.4v.3c2.7,1,4.2,3,5,6.7.8,4.2,1.3,5.9,2,6.9h-6.9c-.8-1-1.3-3.5-2.2-6.7-.5-3-2.2-4.4-5.7-4.4h-3v11.1h.1ZM356.5,205h3c3.5,0,6.4-1.2,6.4-4,0-2.5-1.8-4.2-5.9-4.2-1.7,0-2.8.2-3.5.3v7.9Z"/>
<path class="wm-j" d="M1122.14,128.91h43.77v299.83c0,22.76-1.75,42.9-5.25,59.53-14.44,54.71-65.66,76.6-129.56,76.6s-115.56-21.45-130.88-72.66c-4.38-10.07-6.13-31.08-6.13-63.03v-33.27h84.04v51.65c0,30.2,17.07,45.52,51.65,45.52,32.39,0,48.15-16.2,48.15-49.02V174.43c0-24.07,20.13-45.52,44.21-45.52h0Z"/>
<path class="wm-j" d="M1305.1,311.44h-84.04c10.07-61.72,53.84-92.36,130.88-92.36,92.36,0,138.75,30.2,140.94,92.36v113.81c0,92.36-55.59,133.06-145.76,139.63-80.1,6.13-135.69-31.08-135.69-104.61,1.75-80.1,59.97-101.55,144.45-109.87,35.89-4.38,54.28-14.88,54.28-33.27-1.75-18.82-19.7-28.45-54.28-28.45-29.76-.88-46.4,7-50.77,22.76h0ZM1411.47,421.3v-31.08c-19.7,8.32-42.46,15.32-66.97,20.13-33.27,6.13-50.34,21.89-50.34,46.84,1.75,26.7,15.76,38.96,42.46,38.96,46.4,0,74.85-27.58,74.85-74.85Z"/>
<path class="wm-j" d="M1585.24,617.4c45.96,0,62.59-22.76,49.02-66.97l-113.81-326.53h95.42l66.09,231.55,58.22-201.79c5.25-19.7,18.38-29.76,39.83-29.76h58.65l-131.75,390.88c-20.13,55.15-40.27,73.97-109.87,73.97-21.45,0-32.83-.44-35.45-2.63v-68.72h23.65Z"/>
<path class="wm-j" d="M2166.96,170.93v242.49c0,100.24-52.53,150.14-156.7,149.7-103.74-1.75-155.39-58.22-155.39-169.39s44.21-171.58,133.06-174.65c41.58,0,73.97,17.07,95.42,51.65v-141.82h41.58c23.2,0,42.02,19.26,42.02,42.02h.01ZM1941.98,390.23c-.44,67.41,21.89,101.55,70.03,101.55s71.78-34.14,71.78-101.55c-1.75-64.34-25.39-95.86-70.47-95.86s-69.16,31.52-71.35,95.86h0Z"/>
<path class="wm-j" d="M2367.87,565.75c-101.11-3.06-151.45-61.72-151.45-175.52s51.21-170.27,152.76-171.15c105.93,0,155.83,64.78,149.7,195.66h-215.79c3.06,51.21,25.39,77.04,66.09,77.04,19.7,0,38.08-8.32,54.28-24.07,7.44-8.32,17.07-11.82,28.45-11.82h61.72c-17.95,70.47-63.47,109.87-145.76,109.87h0ZM2304.4,354.77h125.62c-5.25-44.21-25.83-66.97-61.72-66.97s-57.78,22.76-63.91,66.97h0Z"/>
<path class="wm-j" d="M2802.08,557.87c-27.58-1.75-41.58-15.32-41.58-41.58v-171.58c-1.75-34.58-21.01-51.65-58.22-51.65s-56.03,17.07-56.9,51.65v213.17h-85.35v-196.53c0-95.42,48.15-142.69,143.13-142.69s141.82,47.27,141.38,142.69v196.53h-42.46Z"/>
<path class="wm-a" d="M3151.07,128.91l156.73,428.96h-94.22l-28.99-87.42h-168.96l-28.99,87.42h-95.58l145.86-400.42c6.34-19.02,20.38-28.54,42.13-28.54h72.02ZM3039.18,397.52h120.04l-60.24-182.09-59.79,182.09h-.01Z"/>
<path class="wm-a" d="M3640.72,352.22c18.57,6.34,32.61,16.31,41.67,29.44,7.7,14.49,11.32,35.78,13.59,63.87l4.08,83.8c.45,13.14,5.89,22.65,14.04,28.54h-98.29c-4.53-8.15-6.34-17.21-7.25-25.82-1.81-6.34-3.17-30.8-4.08-72.47-3.17-51.64-12.68-67.94-65.23-67.94h-95.12v166.24h-89.23V175.11c0-24.46,19.93-46.2,44.84-46.2h165.33c90.59,0,140.42,33.97,140.42,122.3.91,54.36-23.1,89.69-64.77,101.01ZM3555.11,203.65h-110.52v112.79h105.09c42.58,0,66.13-14.95,66.13-56.62,0-39.41-21.29-56.17-60.7-56.17h0Z"/>
<path class="wm-a" d="M3796.09,128.91h302.13v76.1h-129.1v352.41h-89.23V205.01h-129.1v-29.9c.45-24.46,19.93-46.2,45.3-46.2Z"/>
</svg>
</a>
<label class="theme-toggle" for="theme-flip">
<svg class="icon-sun" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><circle cx="12" cy="12" r="5" fill="currentColor"/><g stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="12" y1="2.4" x2="12" y2="4.4"/><line x1="12" y1="19.6" x2="12" y2="21.6"/><line x1="2.4" y1="12" x2="4.4" y2="12"/><line x1="19.6" y1="12" x2="21.6" y2="12"/><line x1="5.2" y1="5.2" x2="6.6" y2="6.6"/><line x1="17.4" y1="17.4" x2="18.8" y2="18.8"/><line x1="5.2" y1="18.8" x2="6.6" y2="17.4"/><line x1="17.4" y1="6.6" x2="18.8" y2="5.2"/></g></svg>
<svg class="icon-moon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
</label>
</div>
<div class="sub-nav">
<div class="wrap nav-links">
<a href="#styles">The styles</a>
<a href="#custom">Make it yours</a>
<a href="#a11y">Accessibility</a>
<a href="https://github.com/JaydenART/JaydenART_Realistic_3D_CSS_Button" class="nav-external">Source</a>
</div>
</div>
</nav>
<header id="top">
<div class="wrap header-grid">
<div class="header-copy">
<p class="eyebrow">JaydenART<sup>®</sup> interface study</p>
<h1>A button that actually presses.</h1>
<p class="lede">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.</p>
<p class="privacy"><span class="privacy-lock" aria-hidden="true">🔒</span><span>No requests, no analytics, no storage. The buttons are pure CSS, and the one small script here only draws cursor sparkles.</span></p>
</div>
<div class="hero-art" aria-hidden="true">
<img src="assets/hero-press.svg?v=2.5.1" alt="" width="640" height="300">
</div>
</div>
</header>
<main class="wrap" id="main">
<section class="stage" id="styles" aria-label="Interactive button examples">
<h2>🎭 The styles</h2>
<p class="section-lede">Both are real, native buttons. Hover, press, and tab to them.</p>
<div class="stage-grid">
<div class="stage-card">
<p class="variant-label">JayButton Classic</p>
<p class="variant-note">The 2022 original, preserved exactly: glossy face, copper highlight, deep edge.</p>
<div class="stage-floor">
<button class="jay-button-classic" type="button">Jayden Yoon ZK</button>
</div>
<pre><code><button class='jay-button-classic'>
Jayden Yoon ZK
</button></code></pre>
</div>
<div class="stage-card">
<p class="variant-label">JayButton Studio</p>
<p class="variant-note">The layered component. The cap travels; the edge and shadow stay planted.</p>
<div class="stage-floor">
<button class="jay-button-studio" type="button">
<span class="jay-button-studio__cap">Press me</span>
</button>
</div>
<pre><code><button class='jay-button-studio'>
<span class='jay-button-studio__cap'>Press me</span>
</button></code></pre>
</div>
</div>
</section>
<section class="stage" id="custom">
<h2>🎨 Make it yours</h2>
<p class="section-lede">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.</p>
<div class="stage-grid">
<div class="stage-card">
<p class="variant-label">Brown tone</p>
<div class="stage-floor">
<button class="jay-button" data-tone="brown" type="button">
<span class="jay-button__cap">Warm and classic</span>
</button>
</div>
<pre><code><button class='jay-button' data-tone='brown'>
<span class='jay-button__cap'>...</span>
</button></code></pre>
</div>
<div class="stage-card">
<p class="variant-label">Your palette</p>
<div class="stage-floor">
<button class="jay-button demo-night" type="button">
<span class="jay-button__cap">Midnight edition</span>
</button>
</div>
<pre><code>.demo-night {
--jay-cap: #2c2c34;
--jay-cap-hover: #3a3a44;
--jay-edge: #101014;
--jay-ink: #f3f0e9;
}</code></pre>
</div>
</div>
</section>
<section class="stage" id="a11y">
<h2>♿️ Accessibility, included</h2>
<div class="a11y-grid">
<div class="stage-card">
<p class="variant-label">Keyboard</p>
<p class="variant-note">Native <code><button></code> elements with a visible focus ring. Tab to any button on this page to see it.</p>
</div>
<div class="stage-card">
<p class="variant-label">Disabled</p>
<div class="stage-floor">
<button class="jay-button" type="button" disabled>
<span class="jay-button__cap">Not right now</span>
</button>
</div>
</div>
<div class="stage-card">
<p class="variant-label">Preferences</p>
<p class="variant-note">Reduced motion is honored: the press keeps its resting geometry and answers with shading. Forced-colors mode keeps a real border.</p>
</div>
</div>
</section>
<section class="stage" id="get">
<h2>📦 Use it</h2>
<p class="section-lede">Copy <a href="JayButton.css">JayButton.css</a> into your project. That is the whole install. The <a href="https://github.com/JaydenART/JaydenART_Realistic_3D_CSS_Button#choose-a-style">README</a> documents every class and variable.</p>
</section>
</main>
<footer>
<div class="wrap foot-links">
<span>Built by <a href="https://www.JaydenART.com">JaydenART<sup>®</sup> Inc.</a></span>
<a href="https://github.com/JaydenART/JaydenART_Realistic_3D_CSS_Button">Source on GitHub</a>
<a href="https://github.com/JaydenART/JaydenART_Realistic_3D_CSS_Button/issues">Report an issue</a>
<a href="https://jaydenyoonzk.github.io/projects/">Founder's tools</a>
<span>MIT License</span>
</div>
<div class="wrap legal">
<span>Copyright © <a href="https://www.JaydenART.com"><strong>JaydenART<sup>®</sup> Inc.</strong></a> 2026. All Rights Reserved.</span>
</div>
</footer>
<a class="to-top" href="#top" aria-label="Back to top">↑</a>
</div>
</body>
</html>