admin
363 lines
14 KiB
HTML
363 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Play Button Mockups — v7 Variants</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--color-cyan: oklch(0.82 0.16 200);
|
|
--color-bg: oklch(0.18 0.02 260);
|
|
--color-card: oklch(0.22 0.025 260);
|
|
--color-card-2: oklch(0.16 0.02 260);
|
|
}
|
|
body { background: var(--color-bg); color: #e5e7eb; font-family: ui-sans-serif, system-ui, sans-serif; }
|
|
.card {
|
|
position: relative;
|
|
aspect-ratio: 4 / 3;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(120% 80% at 50% 30%, oklch(0.28 0.03 260) 0%, var(--color-card) 60%, var(--color-card-2) 100%);
|
|
border: 1px solid oklch(1 0 0 / 0.06);
|
|
}
|
|
.id-bg {
|
|
position: absolute; inset: 0;
|
|
display: grid; place-items: center;
|
|
font-weight: 700;
|
|
font-size: clamp(48px, 9vw, 88px);
|
|
color: oklch(0.55 0.01 260 / 0.45);
|
|
letter-spacing: 0.02em;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
.vip {
|
|
position: absolute; top: 10px; left: 10px;
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
background: rgba(0,0,0,0.8);
|
|
color: var(--color-cyan);
|
|
border: 1px solid color-mix(in oklch, var(--color-cyan) 60%, transparent);
|
|
font: 600 11px/1 ui-monospace, monospace;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
z-index: 6;
|
|
}
|
|
.checkbox {
|
|
position: absolute; top: 10px; right: 10px;
|
|
width: 28px; height: 28px;
|
|
border-radius: 8px;
|
|
background: rgba(0,0,0,0.4);
|
|
border: 2px solid rgba(255,255,255,0.5);
|
|
display: grid; place-items: center;
|
|
color: transparent;
|
|
backdrop-filter: blur(6px);
|
|
opacity: 0; transition: opacity .2s;
|
|
z-index: 6;
|
|
}
|
|
.card:hover .checkbox { opacity: 1; }
|
|
.meta {
|
|
position: absolute; left: 12px; right: 12px; bottom: 10px;
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
z-index: 5;
|
|
}
|
|
.meta .code { color: var(--color-cyan); font: 700 14px/1.1 ui-monospace, monospace; letter-spacing: 0.06em; }
|
|
.meta .name { color: #d1d5db; font-size: 12px; }
|
|
.grad-bottom {
|
|
position: absolute; inset: auto 0 0 0; height: 60%;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
|
|
pointer-events: none;
|
|
}
|
|
.actions {
|
|
position: absolute; right: 10px; bottom: 10px;
|
|
display: flex; gap: 6px;
|
|
opacity: 0; transition: opacity .2s;
|
|
z-index: 7;
|
|
}
|
|
.card:hover .actions { opacity: 1; }
|
|
.actions button {
|
|
width: 28px; height: 28px; border-radius: 8px;
|
|
background: rgba(0,0,0,0.6);
|
|
border: 1px solid rgba(255,255,255,0.18);
|
|
color: rgba(255,255,255,0.9);
|
|
display: grid; place-items: center;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
/* ---------- v7 base (all variants share position/size) ---------- */
|
|
.play {
|
|
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
|
|
width: 64px; height: 44px; border-radius: 6px;
|
|
display: grid; place-items: center;
|
|
color: rgba(255,255,255,0.95);
|
|
transition: transform .2s, border-color .2s, color .2s, background .2s, box-shadow .2s;
|
|
}
|
|
.play svg { width: 18px; height: 18px; }
|
|
.play:hover {
|
|
animation: pulse 1.2s ease-out infinite;
|
|
border-color: var(--color-cyan);
|
|
color: var(--color-cyan);
|
|
}
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-cyan) 50%, transparent); }
|
|
100% { box-shadow: 0 0 0 14px color-mix(in oklch, var(--color-cyan) 0%, transparent); }
|
|
}
|
|
|
|
/* A — Glass dome (current refined) */
|
|
.vA .play {
|
|
background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.05), rgba(0,0,0,0.15) 80%);
|
|
border: 1.5px solid rgba(0,0,0,0.35);
|
|
box-shadow:
|
|
0 2px 8px rgba(0,0,0,0.45),
|
|
inset 0 1px 0 rgba(255,255,255,0.18),
|
|
inset 0 -1px 2px rgba(0,0,0,0.4);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
/* B — Outline only (no fill, thin ring) */
|
|
.vB .play {
|
|
background: transparent;
|
|
border: 1.5px solid rgba(255,255,255,0.55);
|
|
}
|
|
|
|
/* C — Inset / pressed (flat dark fill, strong inner shadow) */
|
|
.vC .play {
|
|
background: rgba(0,0,0,0.45);
|
|
border: 1px solid rgba(0,0,0,0.5);
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(0,0,0,0.6),
|
|
inset 0 -1px 0 rgba(255,255,255,0.08);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
/* D — Cyan glow ring */
|
|
.vD .play {
|
|
background: rgba(0,0,0,0.25);
|
|
border: 1.5px solid color-mix(in oklch, var(--color-cyan) 65%, transparent);
|
|
color: var(--color-cyan);
|
|
box-shadow:
|
|
0 0 0 1px rgba(0,0,0,0.25),
|
|
0 0 14px color-mix(in oklch, var(--color-cyan) 30%, transparent);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
/* E — Double ring */
|
|
.vE .play {
|
|
background: rgba(0,0,0,0.30);
|
|
border: 1.5px solid rgba(255,255,255,0.35);
|
|
box-shadow:
|
|
inset 0 0 0 4px rgba(0,0,0,0),
|
|
inset 0 0 0 5px rgba(255,255,255,0.18),
|
|
0 1px 4px rgba(0,0,0,0.35);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
/* F — Heavy frost (strong glass) */
|
|
.vF .play {
|
|
background: rgba(255,255,255,0.10);
|
|
border: 1px solid rgba(255,255,255,0.25);
|
|
box-shadow:
|
|
0 4px 16px rgba(0,0,0,0.35),
|
|
inset 0 1px 0 rgba(255,255,255,0.25);
|
|
backdrop-filter: blur(14px) saturate(1.2);
|
|
}
|
|
|
|
/* G — Beveled metal (vertical gradient) */
|
|
.vG .play {
|
|
background: linear-gradient(180deg,
|
|
rgba(255,255,255,0.18) 0%,
|
|
rgba(255,255,255,0.04) 45%,
|
|
rgba(0,0,0,0.25) 100%);
|
|
border: 1px solid rgba(0,0,0,0.45);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.30),
|
|
inset 0 -1px 0 rgba(0,0,0,0.35),
|
|
0 2px 6px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* H — Floating disc (drop shadow only, no border) */
|
|
.vH .play {
|
|
background: rgba(20,20,28,0.75);
|
|
border: 0;
|
|
box-shadow:
|
|
0 6px 16px rgba(0,0,0,0.55),
|
|
0 1px 2px rgba(0,0,0,0.5);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
/* I — Etched (no fill, inset shadow + highlight, looks engraved) */
|
|
.vI .play {
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow:
|
|
inset 0 2px 3px rgba(0,0,0,0.55),
|
|
inset 0 -1px 1px rgba(255,255,255,0.15),
|
|
0 1px 0 rgba(255,255,255,0.06);
|
|
}
|
|
|
|
/* J — Dashed ring (technical aesthetic) */
|
|
.vJ .play {
|
|
background: rgba(0,0,0,0.20);
|
|
border: 1.5px dashed rgba(255,255,255,0.45);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.label { color: var(--color-cyan); font: 600 12px/1 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
|
|
.why { color: #9ca3af; font-size: 12px; line-height: 1.4; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
<main class="max-w-7xl mx-auto p-8">
|
|
<header class="mb-8">
|
|
<h1 class="text-2xl font-bold text-white">Play Button — v7 Concentric Ring · 9 Variants</h1>
|
|
<p class="text-gray-400 mt-1 text-sm">Same 52px circle, position, and icon. Only fill, border, and shadow change. Hover any card to reveal action slots.</p>
|
|
</header>
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- A -->
|
|
<div>
|
|
<div class="label mb-2">A · Glass dome</div>
|
|
<div class="card vA group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">Soft radial top-light, dark thin border, inset highlight + drop shadow. Subtle dome.</p>
|
|
</div>
|
|
|
|
<!-- B -->
|
|
<div>
|
|
<div class="label mb-2">B · Outline only</div>
|
|
<div class="card vB group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">Thin white ring, transparent inside. Lightest possible touch.</p>
|
|
</div>
|
|
|
|
<!-- C -->
|
|
<div>
|
|
<div class="label mb-2">C · Inset / pressed</div>
|
|
<div class="card vC group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">Flat dark fill, strong inner shadow. Looks recessed into the card.</p>
|
|
</div>
|
|
|
|
<!-- D -->
|
|
<div>
|
|
<div class="label mb-2">D · Cyan glow ring</div>
|
|
<div class="card vD group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">Cyan border + soft cyan halo. Brand signal without solid fill.</p>
|
|
</div>
|
|
|
|
<!-- E -->
|
|
<div>
|
|
<div class="label mb-2">E · Double ring</div>
|
|
<div class="card vE group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">Outer + inner concentric stroke. Reads as a precise lens.</p>
|
|
</div>
|
|
|
|
<!-- F -->
|
|
<div>
|
|
<div class="label mb-2">F · Heavy frost</div>
|
|
<div class="card vF group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">Stronger backdrop-blur, brighter inner edge — pronounced glass.</p>
|
|
</div>
|
|
|
|
<!-- G -->
|
|
<div>
|
|
<div class="label mb-2">G · Beveled metal</div>
|
|
<div class="card vG group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">Top-to-bottom gradient + inset edges. Tactile, slightly skeuomorphic.</p>
|
|
</div>
|
|
|
|
<!-- H -->
|
|
<div>
|
|
<div class="label mb-2">H · Floating disc</div>
|
|
<div class="card vH group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">No border. Soft dark fill + prominent drop shadow — disc hovers above.</p>
|
|
</div>
|
|
|
|
<!-- I -->
|
|
<div>
|
|
<div class="label mb-2">I · Etched</div>
|
|
<div class="card vI group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">No fill, no border — only inset shadow + bottom highlight. Engraved into the card.</p>
|
|
</div>
|
|
|
|
<!-- J -->
|
|
<div>
|
|
<div class="label mb-2">J · Dashed ring</div>
|
|
<div class="card vJ group">
|
|
<div class="id-bg">502 337</div>
|
|
<span class="vip">◆ VIP</span><span class="checkbox">✓</span>
|
|
<button type="button" class="play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<div class="grad-bottom"></div>
|
|
<div class="meta"><span class="code">YUJ-001</span><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="actions"><button>♥</button><button>⋯</button></div>
|
|
</div>
|
|
<p class="why mt-2">Dashed border. Technical/sketch feel — reads as overlay UI, not a sealed control.</p>
|
|
</div>
|
|
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|