<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Stylish Buttons — Open YouTube</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root{
--bg: #0b0f14;
--card:#0f1520;
--text:#e8ecf1;
--muted:#9aa4af;
--red:#ff2d55;
--pink:#ff4d6d;
--orange:#ff9f1a;
--yellow:#ffd166;
--lime:#a7f3d0;
--blue:#60a5fa;
--purple:#a78bfa;
--shadow: 0 10px 25px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:
radial-gradient(1200px 800px at 10% 10%, #111827 0%, #0b0f14 60%) fixed;
color:var(--text); font:500 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
display:flex; align-items:center; justify-content:center; padding:24px;
}
.wrap{
width:min(980px,100%); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:var(--shadow); padding:28px;
backdrop-filter:saturate(140%) blur(6px);
}
h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px}
p{margin:0 0 22px; color:var(--muted)}
.grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px;
}
/* Base button */
.btn{
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
width:100%; min-height:48px; padding:12px 16px; border-radius:12px; border:0;
color:#fff; text-decoration:none; cursor:pointer; user-select:none;
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
will-change:transform, filter; outline:none;
}
.btn svg{width:18px; height:18px; flex:0 0 auto}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(96,165,250,.45)}
.btn:active{transform:translateY(1px) scale(.99)}
/* 1) Animated Gradient + Shine */
.btn--shine{
background:linear-gradient(120deg, var(--pink), var(--orange), var(--yellow));
background-size:200% 200%;
animation:gradient 6s ease infinite;
overflow:hidden;
}
.btn--shine::after{
content:""; position:absolute; inset:-60% -20%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
transform:rotate(20deg) translateX(-120%);
animation:shine 2.8s ease-in-out infinite;
pointer-events:none;
}
/* 2) Neon Glow */
.btn--glow{
background:#121a26; border:1px solid rgba(255,255,255,.1);
box-shadow:0 0 0 rgba(0,0,0,0);
}
.btn--glow:hover{
box-shadow:
0 0 18px rgba(96,165,250,.45),
inset 0 0 18px rgba(96,165,250,.25);
color:#eaf2ff;
filter:saturate(115%);
}
.btn--glow .ring{
position:absolute; inset:-2px; border-radius:inherit;
background:conic-gradient(from 0deg, var(--blue), var(--purple), var(--pink), var(--blue));
filter:blur(18px) opacity(.35); z-index:-1;
}
/* 3) Glassmorphism + subtle tilt */
.btn--glass{
background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(8px) saturate(140%);
}
.btn--glass:hover{transform:translateY(-2px) rotateX(2deg)}
/* 4) 3D Pressed */
.btn--3d{
background:linear-gradient(180deg, #2a2f3a, #1b212d);
box-shadow: 0 7px 0 #0e131c, 0 14px 24px rgba(0,0,0,.35);
}
.btn--3d:active{
transform:translateY(5px);
box-shadow: 0 2px 0 #0e131c, 0 6px 12px rgba(0,0,0,.35);
}
/* 5) Outline → Fill */
.btn--outline{
color:#fff; background:transparent; border:2px solid transparent;
background-image:
linear-gradient(var(--bg), var(--bg)),
linear-gradient(90deg, var(--pink), var(--purple), var(--blue));
background-origin:border-box; background-clip:padding-box, border-box;
}
.btn--outline:hover{
background-image:
linear-gradient(90deg, var(--pink), var(--purple), var(--blue)),
linear-gradient(90deg, var(--pink), var(--purple), var(--blue));
filter:brightness(1.05);
}
/* 6) Ripple (needs tiny JS below) */
.btn--ripple{
background:linear-gradient(135deg, #ff375f, #ff793f);
overflow:hidden;
}
.ripple-wave{
position:absolute; border-radius:999px; transform:translate(-50%,-50%);
pointer-events:none; background:rgba(255,255,255,.35);
animation:ripple .6s ease-out forwards;
}
/* Animations */
@keyframes gradient{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes shine{
0%{transform:rotate(20deg) translateX(-120%)}
100%{transform:rotate(20deg) translateX(120%)}
}
@keyframes ripple{
from{width:0;height:0;opacity:.5}
to{width:420px;height:420px;opacity:0}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.btn, .btn::after, .ring{transition:none; animation:none}
}
/* Small helper card look for the grid items */
.card{
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px;
}
.label{font-size:12px; color:var(--muted); margin:4px 2px 10px}
</style>
</head>
<body>
<div class="wrap" role="region" aria-label="Fancy buttons demo">
<h1>Stylish Buttons (Open YouTube)</h1>
<p>All buttons open in a new tab. Pick any style you like.</p>
<div class="grid">
<div class="card">
<div class="label">Animated Gradient + Shine</div>
<a class="btn btn--shine"
href="https://www.youtube.com"
target="_blank" rel="noopener noreferrer" aria-label="Open YouTube">
<!-- simple play icon -->
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8l6 4-6 4V8z"></path><rect x="2" y="5" width="20" height="14" rx="4" ry="4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
Open YouTube
</a>
</div>
<div class="card">
<div class="label">Neon Glow</div>
<a class="btn btn--glow"
href="https://www.youtube.com"
target="_blank" rel="noopener noreferrer" aria-label="Open YouTube Neon">
<span class="ring" aria-hidden="true"></span>
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8l6 4-6 4V8z"></path><rect x="2" y="5" width="20" height="14" rx="4" ry="4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
Neon YouTube
</a>
</div>
<div class="card">
<div class="label">Glassmorphism</div>
<a class="btn btn--glass"
href="https://www.youtube.com"
target="_blank" rel="noopener noreferrer" aria-label="Open YouTube Glass">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8l6 4-6 4V8z"></path><rect x="2" y="5" width="20" height="14" rx="4" ry="4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
Glass YouTube
</a>
</div>
<div class="card">
<div class="label">3D Press</div>
<a class="btn btn--3d"
href="https://www.youtube.com"
target="_blank" rel="noopener noreferrer" aria-label="Open YouTube 3D">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8l6 4-6 4V8z"></path><rect x="2" y="5" width="20" height="14" rx="4" ry="4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
3D YouTube
</a>
</div>
<div class="card">
<div class="label">Outline → Fill</div>
<a class="btn btn--outline"
href="https://www.youtube.com"
target="_blank" rel="noopener noreferrer" aria-label="Open YouTube Outline Fill">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8l6 4-6 4V8z"></path><rect x="2" y="5" width="20" height="14" rx="4" ry="4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
Outline → Fill
</a>
</div>
<div class="card">
<div class="label">Ripple (click effect)</div>
<a class="btn btn--ripple"
href="https://www.youtube.com"
target="_blank" rel="noopener noreferrer" aria-label="Open YouTube Ripple">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 8l6 4-6 4V8z"></path><rect x="2" y="5" width="20" height="14" rx="4" ry="4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
Ripple YouTube
</a>
</div>
</div>
</div>
<script>
// Tiny ripple effect for buttons with .btn--ripple
const rippleButtons = document.querySelectorAll('.btn--ripple');
rippleButtons.forEach(btn => {
btn.addEventListener('click', e => {
const rect = btn.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const wave = document.createElement('span');
wave.className = 'ripple-wave';
wave.style.left = x + 'px';
wave.style.top = y + 'px';
btn.appendChild(wave);
// Clean up after animation
setTimeout(() => wave.remove(), 650);
});
});
</script>
</body>
</html>
Stylish Buttons (Open YouTube)
All buttons open in a new tab. Pick any style you like.
Animated Gradient + Shine
Open YouTube
Neon Glow
Neon YouTube
Glassmorphism
Glass YouTube
3D Press
3D YouTube
Outline → Fill
Outline → Fill
Ripple (click effect)
Ripple YouTube