|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Button Bonanza</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-poppins"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<h1 class="text-4xl font-bold text-center mb-12 text-gray-800">Button Bonanza 🎉</h1> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Classic Elegance</h2> |
|
|
<button class="btn-classic">Click Me</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Modern Gradient</h2> |
|
|
<button class="btn-gradient">Hover Over Me</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">3D Effect</h2> |
|
|
<button class="btn-3d">Press Me</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Outline with Icon</h2> |
|
|
<button class="btn-outline-icon"> |
|
|
<i data-feather="star" class="mr-2"></i> Star Me |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Animated Fill</h2> |
|
|
<button class="btn-animated-fill">Slide Over</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Glass Morphism</h2> |
|
|
<button class="btn-glass">See Through</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Neumorphic</h2> |
|
|
<button class="btn-neumorphic">Soft Press</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Bounce Animation</h2> |
|
|
<button class="btn-bounce">Bounce Me</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Ripple Effect</h2> |
|
|
<button class="btn-ripple">Make Waves</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h2 class="text-xl font-semibold mb-4">Social Media</h2> |
|
|
<button class="btn-social"> |
|
|
<i data-feather="twitter" class="mr-2"></i> Tweet This |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
