clickstyles
Version:
A collection of animated styles for buttons, CTAs, links, cards, toggles, and other interactive UI elements.
169 lines (159 loc) • 8.6 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Preview Page - Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Optional: Custom styles for code blocks to enhance readability.
Tailwind's `prose` plugin (which requires a build step) would be
ideal for more robust code block styling, but we can add
some basic ones here for standalone CDN use. */
pre {
background-color: #272822; /* Dracula theme background */
color: #f8f8f2; /* Dracula theme foreground */
padding: 1rem;
border-radius: 0.375rem; /* rounded-md */
overflow-x: auto;
position: relative;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9em;
}
pre code {
display: block;
white-space: pre-wrap; /* Ensures code wraps */
word-break: break-all;
}
/* Basic styling for the copy button feedback */
.copy-button-feedback {
@apply bg-blue-400; /* Lighter blue */
}
</style>
</head>
<body class="font-sans bg-gray-100 text-gray-800 leading-relaxed">
<header class="bg-gray-800 text-white py-4 text-center">
<h1 class="text-4xl font-bold mb-2">CSS Button Previews</h1>
<p class="text-lg">Click on a button to see its code and copy
it!</p>
</header>
<main class="p-5 max-w-4xl mx-auto my-5 bg-white shadow-lg rounded-lg">
<section
class="mb-10 p-5 border border-gray-300 rounded-md bg-gray-50">
<h2 class="text-2xl font-semibold mb-4 text-gray-700">Simple
Green Button</h2>
<div
class="flex justify-center items-center p-8 bg-gray-200 rounded-md border border-dashed border-gray-400">
<button
class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 ease-in-out">
Hover Me
</button>
</div>
<div class="mt-8">
<h3
class="text-xl font-medium mb-2 text-green-600 border-b border-gray-400 pb-1">HTML
Code:</h3>
<pre><code class="language-html"><button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 ease-in-out">
Hover Me
</button></code></pre>
<button
class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-200 ease-in-out copy-button"
onclick="copyCode(this, 'html')">Copy HTML</button>
<h3
class="text-xl font-medium mt-6 mb-2 text-green-600 border-b border-gray-400 pb-1">Tailwind
Classes Explanation:</h3>
<pre><code class="language-text">bg-green-600: Sets background color to a shade of green.
hover:bg-green-700: Changes background color to a darker green on hover.
text-white: Sets text color to white.
font-bold: Makes the text bold.
py-3: Adds vertical padding (12px).
px-8: Adds horizontal padding (32px).
rounded-lg: Applies large border-radius for rounded corners.
shadow-md: Adds a medium box shadow.
transition: Enables CSS transitions for smooth changes.
duration-300: Sets transition duration to 300ms.
ease-in-out: Uses an ease-in-out timing function for transitions.</code></pre>
<button
class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-200 ease-in-out copy-button"
onclick="copyCode(this, 'explanation')">Copy
Explanation</button>
</div>
</section>
<section
class="mb-10 p-5 border border-gray-300 rounded-md bg-gray-50">
<h2 class="text-2xl font-semibold mb-4 text-gray-700">Outline
Button</h2>
<div
class="flex justify-center items-center p-8 bg-gray-200 rounded-md border border-dashed border-gray-400">
<button
class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-semibold py-2 px-6 rounded-full transition duration-300 ease-in-out">
Click Me
</button>
</div>
<div class="mt-8">
<h3
class="text-xl font-medium mb-2 text-blue-500 border-b border-gray-400 pb-1">HTML
Code:</h3>
<pre><code class="language-html"><button class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-semibold py-2 px-6 rounded-full transition duration-300 ease-in-out">
Click Me
</button></code></pre>
<button
class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-200 ease-in-out copy-button"
onclick="copyCode(this, 'html')">Copy HTML</button>
<h3
class="text-xl font-medium mt-6 mb-2 text-blue-500 border-b border-gray-400 pb-1">Tailwind
Classes Explanation:</h3>
<pre><code class="language-text">border: Adds a border.
border-blue-500: Sets border color to a shade of blue.
text-blue-500: Sets text color to blue.
hover:bg-blue-500: Changes background to blue on hover.
hover:text-white: Changes text to white on hover.
font-semibold: Sets font weight to semi-bold.
py-2: Adds vertical padding.
px-6: Adds horizontal padding.
rounded-full: Makes the button fully rounded (pill shape).
transition: Enables CSS transitions.
duration-300: Sets transition duration to 300ms.
ease-in-out: Uses an ease-in-out timing function.</code></pre>
<button
class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-200 ease-in-out copy-button"
onclick="copyCode(this, 'explanation')">Copy
Explanation</button>
</div>
</section>
</main>
<footer
class="text-center py-5 mt-8 bg-gray-800 text-white rounded-b-lg">
<p class="text-sm">© 2025 Tailwind Button Previews</p>
</footer>
<script>
function copyCode(buttonElement, type) {
let codeElement;
if (type === 'html') {
// Find the previous <pre> element containing the HTML code
codeElement = buttonElement.previousElementSibling.previousElementSibling.querySelector('.language-html');
} else if (type === 'explanation') {
// Find the previous <pre> element containing the explanation code
codeElement = buttonElement.previousElementSibling.querySelector('.language-text');
}
if (codeElement) {
const codeToCopy = codeElement.innerText;
navigator.clipboard.writeText(codeToCopy).then(() => {
buttonElement.textContent = 'Copied!';
buttonElement.classList.add('copy-button-feedback'); // Add feedback class
setTimeout(() => {
buttonElement.textContent = 'Copy ' + type.toUpperCase();
buttonElement.classList.remove('copy-button-feedback'); // Remove feedback class
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
buttonElement.textContent = 'Failed to copy!';
setTimeout(() => {
buttonElement.textContent = 'Copy ' + type.toUpperCase();
}, 2000);
});
}
}
</script>
</body>
</html>