clickstyles
Version:
A collection of animated styles for buttons, CTAs, links, cards, toggles, and other interactive UI elements.
221 lines (210 loc) • 12.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ClickStyles Playground</title>
<script>
tailwind = { config: { darkMode: 'class' } };
</script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="../dist/clickstyles.css">
<style>
html { scroll-behavior: smooth; }
.card-style { transition: all 0.3s ease; }
.copy-btn:hover { text-decoration: underline; }
</style>
</head>
<body onload="if(localStorage.getItem('theme')==='dark'){document.documentElement.classList.add('dark');}" class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-white transition-colors min-h-screen">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 21 -7"
result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
<div class="flex">
<aside class="hidden md:block w-64 sticky top-0 h-screen bg-gray-100 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 p-4">
<h2 class="text-lg font-semibold mb-4">Filter Components</h2>
<ul id="sidebar-links" class="space-y-2 text-sm">
</ul>
</aside>
<div class="flex-1 max-w-7xl mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold tracking-tight">✨ ClickStyles Playground</h1>
<button onclick="
const root = document.documentElement;
if (root.classList.contains('dark')) {
root.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
root.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
" class="flex items-center gap-2 px-4 py-2 rounded bg-gray-800 text-white dark:bg-white dark:text-black shadow transition">
<span>Toggle Dark</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M12 3v1m0 16v1m8.66-13.66l-.71.71M5.05 18.95l-.71.71M21 12h-1M4 12H3m16.66 5.66l-.71-.71M5.05 5.05l-.71-.71" />
</svg>
</button>
</div>
<h2 id="buttons" class="text-2xl font-semibold mb-4 capitalize">buttons</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
<div class="flex flex-col items-center space-y-2 text-center">
<button class="cs__btn-bounce px-4 py-2 bg-blue-500 text-white rounded shadow">cs__btn-bounce</button>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__btn-bounce</code>
<button onclick="copyToClipboard('cs__btn-bounce')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<button class="cs__btn-glow px-4 py-2 bg-blue-500 text-white rounded shadow">cs__btn-glow</button>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__btn-glow</code>
<button onclick="copyToClipboard('cs__btn-glow')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<button class="cs__btn-ripple px-4 py-2 bg-blue-500 text-white rounded shadow">cs__btn-ripple</button>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__btn-ripple</code>
<button onclick="copyToClipboard('cs__btn-ripple')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<button class="cs__btn-neon px-4 py-2 bg-blue-500 text-white rounded shadow">cs__btn-neon</button>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__btn-neon</code>
<button onclick="copyToClipboard('cs__btn-neon')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<button class="cs__btn-magnetic px-4 py-2 bg-blue-500 text-white rounded shadow">cs__btn-magnetic</button>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__btn-magnetic</code>
<button onclick="copyToClipboard('cs__btn-magnetic')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<button class="cs__btn-rotate px-4 py-2 bg-blue-500 text-white rounded shadow">cs__btn-rotate</button>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__btn-rotate</code>
<button onclick="copyToClipboard('cs__btn-rotate')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<button class="cs__btn-scale px-4 py-2 bg-blue-500 text-white rounded shadow">cs__btn-scale</button>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__btn-scale</code>
<button onclick="copyToClipboard('cs__btn-scale')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<button class="cs__btn-blob">Blob Button
<span class="cs__btn-blob__inner">
<span class="cs__btn-blob__blobs">
<span class="cs__btn-blob__blob"></span>
<span class="cs__btn-blob__blob"></span>
<span class="cs__btn-blob__blob"></span>
<span class="cs__btn-blob__blob"></span>
</span>
</span>
</button>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__btn-blob</code>
<button onclick="copyToClipboard('cs__btn-blob')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div></div><h2 id="cards" class="text-2xl font-semibold mb-4 capitalize">cards</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
<div class="flex flex-col items-center space-y-2 text-center">
<div class="cs__card-glow card-style p-4 bg-white dark:bg-gray-800 rounded shadow w-full text-center">Card Content</div>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__card-glow</code>
<button onclick="copyToClipboard('cs__card-glow')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<div class="cs__card-bounce card-style p-4 bg-white dark:bg-gray-800 rounded shadow w-full text-center">Card Content</div>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__card-bounce</code>
<button onclick="copyToClipboard('cs__card-bounce')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<div class="cs__card-scale card-style p-4 bg-white dark:bg-gray-800 rounded shadow w-full text-center">Card Content</div>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__card-scale</code>
<button onclick="copyToClipboard('cs__card-scale')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<div class="cs__card-blob p-4 text-center">Card Content
<span class="cs__card-blob__inner">
<span class="cs__card-blob__blobs">
<span class="cs__card-blob__blob"></span>
<span class="cs__card-blob__blob"></span>
<span class="cs__card-blob__blob"></span>
</span>
</span>
</div>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__card-blob</code>
<button onclick="copyToClipboard('cs__card-blob')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div></div><h2 id="links" class="text-2xl font-semibold mb-4 capitalize">links</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
<div class="flex flex-col items-center space-y-2 text-center">
<a href="#" class="cs__link-neon text-blue-600 dark:text-blue-400 underline">cs__link-neon</a>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__link-neon</code>
<button onclick="copyToClipboard('cs__link-neon')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<a href="#" class="cs__link-glow text-blue-600 dark:text-blue-400 underline">cs__link-glow</a>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__link-glow</code>
<button onclick="copyToClipboard('cs__link-glow')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<a href="#" class="cs__link-ripple text-blue-600 dark:text-blue-400 underline">cs__link-ripple</a>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__link-ripple</code>
<button onclick="copyToClipboard('cs__link-ripple')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div></div><h2 id="toggles" class="text-2xl font-semibold mb-4 capitalize">toggles</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
<div class="flex flex-col items-center space-y-2 text-center">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="cs__toggle-scale w-11 h-6 bg-gray-300 rounded-full peer-focus:outline-none peer dark:bg-gray-600"></div>
</label>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__toggle-scale</code>
<button onclick="copyToClipboard('cs__toggle-scale')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="cs__toggle-rotate w-11 h-6 bg-gray-300 rounded-full peer-focus:outline-none peer dark:bg-gray-600"></div>
</label>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__toggle-rotate</code>
<button onclick="copyToClipboard('cs__toggle-rotate')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="cs__toggle-bounce w-11 h-6 bg-gray-300 rounded-full peer-focus:outline-none peer dark:bg-gray-600"></div>
</label>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__toggle-bounce</code>
<button onclick="copyToClipboard('cs__toggle-bounce')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div>
<div class="flex flex-col items-center space-y-2 text-center">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="cs__toggle-softpop w-11 h-6 bg-gray-300 rounded-full peer-focus:outline-none peer dark:bg-gray-600"></div>
</label>
<code class="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">cs__toggle-softpop</code>
<button onclick="copyToClipboard('cs__toggle-softpop')" class="text-xs text-blue-500 dark:text-blue-300 copy-btn">Copy</button>
</div></div>
</div></div>
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
const toast = document.createElement('div');
toast.innerText = 'Copied: ' + text;
toast.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-lg z-50';
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 2000);
});
}
document.querySelectorAll("h2").forEach(section => {
const id = section.id || section.textContent.trim().toLowerCase();
const link = document.createElement("a");
link.href = "#" + id;
link.textContent = section.textContent;
link.className = "block px-2 py-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700";
const li = document.createElement("li");
li.appendChild(link);
document.getElementById("sidebar-links").appendChild(li);
});
</script>
</body>
</html>