Spaces:

ProjectGenesis
/

buttons-2

Running

App Files Files Community

ProjectGenesis commited on Jun 27, 2025

Commit

c4ef564

verified ·

1 Parent(s): 387cceb

Create a page showcasing different styles of button design and animation. Create at least 30 buttons, each with different modern and creative designs, animations, and hover effects - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1083 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Buttons 2
-emoji: 👀
-colorFrom: indigo
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: buttons-2
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1083 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modern Button Collection - 30 Unique Designs</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    animation: {
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'wiggle': 'wiggle 1s ease-in-out infinite',
+                        'float': 'float 3s ease-in-out infinite',
+                        'spin-slow': 'spin 6s linear infinite',
+                        'tilt': 'tilt 10s linear infinite',
+                        'bounce-slow': 'bounceSlow 2s infinite'
+                    },
+                    keyframes: {
+                        wiggle: {
+                            '0%, 100%': { transform: 'rotate(-3deg)' },
+                            '50%': { transform: 'rotate(3deg)' },
+                        },
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-10px)' },
+                        },
+                        tilt: {
+                            '0%, 100%': { transform: 'rotate(-2deg)' },
+                            '50%': { transform: 'rotate(2deg)' },
+                        },
+                        bounceSlow: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-15px)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
+            background-size: 400% 400%;
+            animation: gradientBG 15s ease infinite;
+            color: #fff;
+            min-height: 100vh;
+            padding: 3rem 1rem;
+        }
+        @keyframes gradientBG {
+            0% { background-position: 0% 50% }
+            50% { background-position: 100% 50% }
+            100% { background-position: 0% 50% }
+        }
+        .button-container {
+            position: relative;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            z-index: 1;
+        }
+        .button-card {
+            background: rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(12px);
+            border-radius: 16px;
+            padding: 2rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            transition: all 0.4s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            overflow: hidden;
+        }
+        .button-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
+            background: rgba(255, 255, 255, 0.12);
+        }
+        .button-card h3 {
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            color: #fff;
+            text-align: center;
+            font-size: 1.25rem;
+        }
+        .btn {
+            position: relative;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            border: none;
+            outline: none;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: all 0.4s ease;
+            overflow: hidden;
+        }
+        /* Button 1: Gradient Glow */
+        .btn-1 {
+            background: linear-gradient(90deg, #ff0080, #ff8c00);
+            padding: 12px 30px;
+            border-radius: 50px;
+            font-size: 16px;
+            box-shadow: 0 5px 15px rgba(255, 0, 128, 0.4);
+        }
+        .btn-1:hover {
+            transform: translateY(-3px) scale(1.05);
+            box-shadow: 0 10px 25px rgba(255, 0, 128, 0.6);
+        }
+        /* Button 2: 3D Pop Effect */
+        .btn-2 {
+            background: linear-gradient(145deg, #1e88e5, #0d47a1);
+            padding: 14px 32px;
+            border-radius: 12px;
+            font-size: 16px;
+            transform: perspective(500px);
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            box-shadow: 0 5px 15px rgba(13, 71, 161, 0.3);
+        }
+        .btn-2:hover {
+            transform: perspective(500px) rotateX(10deg) rotateY(5deg);
+            box-shadow: 0 15px 30px rgba(13, 71, 161, 0.4);
+        }
+        /* Button 3: Animated Border */
+        .btn-3 {
+            background: transparent;
+            border: 2px solid transparent;
+            padding: 12px 30px;
+            font-size: 16px;
+            position: relative;
+            color: #00e676;
+        }
+        .btn-3::before,
+        .btn-3::after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #00e676;
+            transition: all 0.6s ease;
+        }
+        .btn-3::before {
+            top: -6px;
+            left: -6px;
+            border-right: none;
+            border-bottom: none;
+        }
+        .btn-3::after {
+            bottom: -6px;
+            right: -6px;
+            border-left: none;
+            border-top: none;
+        }
+        .btn-3:hover::before,
+        .btn-3:hover::after {
+            width: calc(100% + 12px);
+            height: calc(100% + 12px);
+        }
+        /* Button 4: Liquid Fill */
+        .btn-4 {
+            background: #1a237e;
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            z-index: 1;
+            overflow: hidden;
+        }
+        .btn-4::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 0%;
+            background: #5c6bc0;
+            transition: height 0.4s ease;
+            z-index: -1;
+        }
+        .btn-4:hover::before {
+            height: 100%;
+        }
+        /* Button 5: Particle Explosion */
+        .btn-5 {
+            background: #e91e63;
+            padding: 12px 28px;
+            border-radius: 8px;
+            font-size: 16px;
+            overflow: visible;
+        }
+        .btn-5::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 10px;
+            height: 10px;
+            background: rgba(255, 255, 255, 0.7);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            transition: all 0.6s ease;
+        }
+        .btn-5:hover::before {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(30);
+        }
+        /* Button 6: Neumorphic Design */
+        .btn-6 {
+            background: #f0f0f0;
+            color: #444;
+            padding: 14px 32px;
+            border-radius: 16px;
+            font-size: 16px;
+            box-shadow: 6px 6px 16px rgba(0,0,0,0.1),
+                       -6px -6px 16px rgba(255,255,255,0.8);
+        }
+        .btn-6:hover {
+            box-shadow: inset 4px 4px 10px rgba(0,0,0,0.1),
+                        inset -4px -4px 10px rgba(255,255,255,0.8);
+        }
+        /* Button 7: Floating Animation */
+        .btn-7 {
+            background: linear-gradient(90deg, #3a7bd5, #00d2ff);
+            padding: 12px 30px;
+            border-radius: 50px;
+            font-size: 16px;
+            animation: float 3s ease-in-out infinite;
+        }
+        /* Button 8: Shine Effect */
+        .btn-8 {
+            background: linear-gradient(90deg, #141e30, #243b55);
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            overflow: hidden;
+        }
+        .btn-8::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -60%;
+            width: 30%;
+            height: 200%;
+            background: rgba(255,255,255,0.15);
+            transform: rotate(30deg);
+            transition: all 0.6s ease;
+        }
+        .btn-8:hover::after {
+            left: 130%;
+        }
+        /* Button 9: Rotate 3D */
+        .btn-9 {
+            background: transparent;
+            border: 2px solid #18ffff;
+            padding: 12px 28px;
+            font-size: 16px;
+            color: #18ffff;
+            perspective: 500px;
+            transform-style: preserve-3d;
+            transition: all 0.6s ease;
+        }
+        .btn-9 span {
+            display: inline-block;
+            transition: transform 0.6s ease;
+        }
+        .btn-9:hover {
+            background: #18ffff;
+            color: #000;
+        }
+        .btn-9:hover span {
+            transform: rotateY(360deg);
+        }
+        /* Button 10: Text Color Shift */
+        .btn-10 {
+            background: #000;
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            color: white;
+            overflow: hidden;
+        }
+        .btn-10 span {
+            position: relative;
+            transition: color 0.4s 0.1s ease;
+        }
+        .btn-10:hover span {
+            color: transparent;
+        }
+        .btn-10::before {
+            content: attr(data-text);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            color: #ffeb3b;
+            transform: translate(-50%, -50%);
+            font-weight: bold;
+            opacity: 0;
+            transition: all 0.4s ease;
+        }
+        .btn-10:hover::before {
+            opacity: 1;
+            animation: textGlow 1s ease-in-out infinite alternate;
+        }
+        @keyframes textGlow {
+            0% { text-shadow: 0 0 5px #ffeb3b; }
+            100% { text-shadow: 0 0 20px #ffeb3b, 0 0 30px #ffeb3b; }
+        }
+        /* Button 11: Glitch Effect */
+        .btn-11 {
+            background: #000;
+            border: 2px solid #ff00c3;
+            padding: 12px 30px;
+            font-size: 16px;
+            color: #ff00c3;
+            position: relative;
+        }
+        .btn-11:hover {
+            animation: glitch 0.3s linear infinite;
+        }
+        @keyframes glitch {
+            0% { transform: translate(0); }
+            20% { transform: translate(-2px, 2px); }
+            40% { transform: translate(-2px, -2px); }
+            60% { transform: translate(2px, 2px); }
+            80% { transform: translate(2px, -2px); }
+            100% { transform: translate(0); }
+        }
+        /* Button 12: Gradient Shift */
+        .btn-12 {
+            background: linear-gradient(90deg, #fd1d1d, #fcb045, #fd1d1d);
+            background-size: 200% 100%;
+            padding: 14px 32px;
+            border-radius: 50px;
+            font-size: 16px;
+            transition: all 0.6s ease;
+        }
+        .btn-12:hover {
+            background-position: 100% 0;
+        }
+        /* Button 13: Morphing Border */
+        .btn-13 {
+            background: transparent;
+            border: 2px solid #ff4081;
+            padding: 12px 28px;
+            font-size: 16px;
+            color: #ff4081;
+            position: relative;
+            transition: all 0.4s ease;
+        }
+        .btn-13:hover {
+            border-radius: 0;
+            color: white;
+            background: #ff4081;
+        }
+        .btn-13::before,
+        .btn-13::after {
+            content: '';
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #ff4081;
+            transition: all 0.4s ease;
+        }
+        .btn-13::before {
+            top: -6px;
+            left: -6px;
+            border-right: 0;
+            border-bottom: 0;
+        }
+        .btn-13::after {
+            bottom: -6px;
+            right: -6px;
+            border-left: 0;
+            border-top: 0;
+        }
+        .btn-13:hover::before,
+        .btn-13:hover::after {
+            width: calc(100% + 4px);
+            height: calc(100% + 4px);
+            border-color: white;
+        }
+        /* Button 14: Circular Fill */
+        .btn-14 {
+            background: #6a1b9a;
+            padding: 12px 30px;
+            border-radius: 50px;
+            font-size: 16px;
+            position: relative;
+            z-index: 1;
+            overflow: hidden;
+        }
+        .btn-14::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 0;
+            height: 0;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            z-index: -1;
+            transition: all 0.6s ease;
+        }
+        .btn-14:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+        /* Button 15: Icon Scale */
+        .btn-15 {
+            background: linear-gradient(45deg, #4a148c, #7b1fa2);
+            padding: 12px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            overflow: hidden;
+        }
+        .btn-15 i {
+            font-size: 20px;
+            transition: all 0.4s ease;
+        }
+        .btn-15:hover i {
+            transform: scale(1.5) translateX(20px);
+            opacity: 0;
+        }
+        /* Button 16: Glass Morphism */
+        .btn-16 {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 14px 32px;
+            border-radius: 50px;
+            font-size: 16px;
+            color: white;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+            transition: all 0.4s ease;
+        }
+        .btn-16:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-3px);
+            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
+        }
+        /* Button 17: Diagonal Slide */
+        .btn-17 {
+            background: #263238;
+            padding: 12px 30px;
+            font-size: 16px;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-17::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: rgba(41, 182, 246, 0.7);
+            transform: skewX(30deg);
+            transition: all 0.6s ease;
+        }
+        .btn-17:hover::before {
+            left: 120%;
+        }
+        /* Button 18: Double Border */
+        .btn-18 {
+            background: transparent;
+            padding: 12px 28px;
+            font-size: 16px;
+            color: #ff6d00;
+            position: relative;
+            transition: all 0.4s ease;
+        }
+        .btn-18::before,
+        .btn-18::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 0;
+            border: 2px solid transparent;
+            transition: all 0.4s ease;
+        }
+        .btn-18::before {
+            top: 0;
+            left: 0;
+            border-top-color: #ff6d00;
+            border-right-color: #ff6d00;
+        }
+        .btn-18::after {
+            bottom: 0;
+            right: 0;
+            border-bottom-color: #ff6d00;
+            border-left-color: #ff6d00;
+        }
+        .btn-18:hover {
+            background: rgba(255, 109, 0, 0.1);
+        }
+        .btn-18:hover::before,
+        .btn-18:hover::after {
+            width: 100%;
+            height: 100%;
+        }
+        /* Button 19: Jelly Effect */
+        .btn-19 {
+            background: #d32f2f;
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .btn-19:hover {
+            transform: scale(0.95);
+            border-radius: 20px;
+        }
+        /* Button 20: Flip Animation */
+        .btn-20 {
+            background: #2e7d32;
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            perspective: 500px;
+            position: relative;
+        }
+        .btn-20 span {
+            display: block;
+            transition: transform 0.4s ease;
+        }
+        .btn-20:hover span {
+            transform: rotateX(360deg);
+        }
+        /* Button 21: Gradient Border */
+        .btn-21 {
+            background: #1a1a1a;
+            padding: 4px;
+            border-radius: 50px;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-21::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #ff00cc, #3333ff);
+            z-index: -1;
+            border-radius: 50px;
+        }
+        .btn-21 span {
+            display: block;
+            background: #1a1a1a;
+            padding: 10px 28px;
+            border-radius: 50px;
+            font-size: 16px;
+            z-index: 1;
+            transition: background 0.4s ease;
+        }
+        .btn-21:hover span {
+            background: transparent;
+        }
+        /* Button 22: Neon Glow */
+        .btn-22 {
+            background: #0c0c22;
+            border: 2px solid #00ffff;
+            padding: 12px 28px;
+            font-size: 16px;
+            color: #00ffff;
+            box-shadow: 0 0 10px #00ffff, inset 0 0 10px #00ffff;
+            text-shadow: 0 0 5px #00ffff;
+            transition: all 0.4s ease;
+        }
+        .btn-22:hover {
+            box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff, inset 0 0 10px #00ffff;
+        }
+        /* Button 23: Hover Underline */
+        .btn-23 {
+            background: transparent;
+            border: none;
+            padding: 12px 0;
+            font-size: 18px;
+            position: relative;
+            color: white;
+        }
+        .btn-23::after {
+            content: '';
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: #ff5722;
+            transform: scaleX(0);
+            transform-origin: bottom right;
+            transition: transform 0.4s ease;
+        }
+        .btn-23:hover::after {
+            transform: scaleX(1);
+            transform-origin: bottom left;
+        }
+        /* Button 24: Staggered Text */
+        .btn-24 {
+            background: #455a64;
+            padding: 12px 28px;
+            border-radius: 8px;
+            font-size: 16px;
+            color: white;
+        }
+        .btn-24 span {
+            display: inline-block;
+        }
+        .btn-24:hover span {
+            animation: letterWave 0.8s ease;
+            animation-delay: calc(0.1s * var(--i));
+        }
+        @keyframes letterWave {
+            0%, 40%, 100% { transform: translateY(0) }
+            20% { transform: translateY(-15px) }
+        }
+        /* Button 25: Infinite Pulse */
+        .btn-25 {
+            background: #e53935;
+            padding: 14px 32px;
+            border-radius: 50px;
+            font-size: 16px;
+            animation: pulse-slow 2s infinite;
+        }
+        /* Button 26: Magnetic Effect */
+        .btn-26 {
+            background: #4527a0;
+            padding: 12px 30px;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+        .btn-26:hover {
+            transform: translate(var(--x, 0), var(--y, 0));
+        }
+        /* Button 27: Button Wave */
+        .btn-27 {
+            background: #0277bd;
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-27:hover {
+            animation: wave 1.5s ease-out infinite;
+        }
+        @keyframes wave {
+            0% { box-shadow: 0 0 0 0 rgba(2, 119, 189, 0.7); }
+            70% { box-shadow: 0 0 0 20px rgba(2, 119, 189, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(2, 119, 189, 0); }
+        }
+        /* Button 28: Hover Glow */
+        .btn-28 {
+            background: #000;
+            border: 2px solid #ffc107;
+            padding: 12px 28px;
+            font-size: 16px;
+            color: #ffc107;
+            transition: all 0.4s ease;
+        }
+        .btn-28:hover {
+            box-shadow: 0 0 20px #ffc107, 0 0 40px #ffc107;
+            color: white;
+            text-shadow: 0 0 10px white;
+        }
+        /* Button 29: Button with Border Animation */
+        .btn-29 {
+            background: transparent;
+            border: none;
+            padding: 12px 30px;
+            font-size: 16px;
+            color: white;
+            position: relative;
+        }
+        .btn-29::before,
+        .btn-29::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #ff1744, transparent);
+            left: 0;
+            transition: all 0.6s ease;
+        }
+        .btn-29::before {
+            top: 0;
+        }
+        .btn-29::after {
+            bottom: 0;
+        }
+        .btn-29:hover::before {
+            transform: translateX(100%);
+        }
+        .btn-29:hover::after {
+            transform: translateX(-100%);
+        }
+        /* Button 30: Animated Gradient Text */
+        .btn-30 {
+            background: #000;
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 16px;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-30 span {
+            background: linear-gradient(90deg, #00bcd4, #3f51b5, #9c27b0);
+            background-size: 200% auto;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            transition: background-position 0.8s ease;
+        }
+        .btn-30:hover span {
+            background-position: -100% 0;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .button-container {
+                grid-template-columns: 1fr;
+            }
+            .button-card {
+                padding: 1.5rem;
+            }
+            .btn {
+                padding: 10px 20px;
+                font-size: 14px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="text-center mb-16">
+        <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 animate-bounce">Modern Button Gallery</h1>
+        <p class="text-xl text-white/80 max-w-2xl mx-auto">30 unique button designs with creative animations and hover effects</p>
+    </header>
+    <div class="button-container">
+        <!-- Button 1 -->
+        <div class="button-card">
+            <h3>Gradient Glow</h3>
+            <button class="btn btn-1">Hover Me</button>
+        </div>
+        <!-- Button 2 -->
+        <div class="button-card">
+            <h3>3D Pop Effect</h3>
+            <button class="btn btn-2">Click Me</button>
+        </div>
+        <!-- Button 3 -->
+        <div class="button-card">
+            <h3>Animated Border</h3>
+            <button class="btn btn-3">Try Me</button>
+        </div>
+        <!-- Button 4 -->
+        <div class="button-card">
+            <h3>Liquid Fill</h3>
+            <button class="btn btn-4">Fill Me</button>
+        </div>
+        <!-- Button 5 -->
+        <div class="button-card">
+            <h3>Particle Explosion</h3>
+            <button class="btn btn-5">Explode</button>
+        </div>
+        <!-- Button 6 -->
+        <div class="button-card">
+            <h3>Neumorphic Design</h3>
+            <button class="btn btn-6">Press Me</button>
+        </div>
+        <!-- Button 7 -->
+        <div class="button-card">
+            <h3>Floating Animation</h3>
+            <button class="btn btn-7">Float Away</button>
+        </div>
+        <!-- Button 8 -->
+        <div class="button-card">
+            <h3>Shine Effect</h3>
+            <button class="btn btn-8">Shine On</button>
+        </div>
+        <!-- Button 9 -->
+        <div class="button-card">
+            <h3>Rotate 3D Text</h3>
+            <button class="btn btn-9"><span>Rotate Me</span></button>
+        </div>
+        <!-- Button 10 -->
+        <div class="button-card">
+            <h3>Text Color Shift</h3>
+            <button class="btn btn-10" data-text="SUCCESS"><span>Hover</span></button>
+        </div>
+        <!-- Button 11 -->
+        <div class="button-card">
+            <h3>Glitch Effect</h3>
+            <button class="btn btn-11">Glitch</button>
+        </div>
+        <!-- Button 12 -->
+        <div class="button-card">
+            <h3>Gradient Shift</h3>
+            <button class="btn btn-12">Slide</button>
+        </div>
+        <!-- Button 13 -->
+        <div class="button-card">
+            <h3>Morphing Border</h3>
+            <button class="btn btn-13">Morph</button>
+        </div>
+        <!-- Button 14 -->
+        <div class="button-card">
+            <h3>Circular Fill</h3>
+            <button class="btn btn-14">Expand</button>
+        </div>
+        <!-- Button 15 -->
+        <div class="button-card">
+            <h3>Icon Scale</h3>
+            <button class="btn btn-15"><i>→</i><span>Send</span></button>
+        </div>
+        <!-- Button 16 -->
+        <div class="button-card">
+            <h3>Glass Morphism</h3>
+            <button class="btn btn-16">Glass</button>
+        </div>
+        <!-- Button 17 -->
+        <div class="button-card">
+            <h3>Diagonal Slide</h3>
+            <button class="btn btn-17">Slide In</button>
+        </div>
+        <!-- Button 18 -->
+        <div class="button-card">
+            <h3>Double Border</h3>
+            <button class="btn btn-18">Animate Borders</button>
+        </div>
+        <!-- Button 19 -->
+        <div class="button-card">
+            <h3>Jelly Effect</h3>
+            <button class="btn btn-19">Squish</button>
+        </div>
+        <!-- Button 20 -->
+        <div class="button-card">
+            <h3>Text Flip</h3>
+            <button class="btn btn-20"><span>Flip</span></button>
+        </div>
+        <!-- Button 21 -->
+        <div class="button-card">
+            <h3>Gradient Border</h3>
+            <button class="btn btn-21"><span>Gradient</span></button>
+        </div>
+        <!-- Button 22 -->
+        <div class="button-card">
+            <h3>Neon Glow</h3>
+            <button class="btn btn-22">Neon</button>
+        </div>
+        <!-- Button 23 -->
+        <div class="button-card">
+            <h3>Hover Underline</h3>
+            <button class="btn btn-23">Highlight</button>
+        </div>
+        <!-- Button 24 -->
+        <div class="button-card">
+            <h3>Staggered Text</h3>
+            <button class="btn btn-24"><span style="--i:1">S</span><span style="--i:2">t</span><span style="--i:3">a</span><span style="--i:4">g</span><span style="--i:5">g</span><span style="--i:6">e</span><span style="--i:7">r</span></button>
+        </div>
+        <!-- Button 25 -->
+        <div class="button-card">
+            <h3>Infinite Pulse</h3>
+            <button class="btn btn-25">Pulse</button>
+        </div>
+        <!-- Button 26 -->
+        <div class="button-card">
+            <h3>Magnetic Effect</h3>
+            <button class="btn btn-26">Magnet</button>
+        </div>
+        <!-- Button 27 -->
+        <div class="button-card">
+            <h3>Button Wave</h3>
+            <button class="btn btn-27">Wave</button>
+        </div>
+        <!-- Button 28 -->
+        <div class="button-card">
+            <h3>Hover Glow</h3>
+            <button class="btn btn-28">Glow</button>
+        </div>
+        <!-- Button 29 -->
+        <div class="button-card">
+            <h3>Border Animation</h3>
+            <button class="btn btn-29">Animate Borders</button>
+        </div>
+        <!-- Button 30 -->
+        <div class="button-card">
+            <h3>Gradient Text</h3>
+            <button class="btn btn-30"><span>Gradient Text</span></button>
+        </div>
+    </div>
+    <script>
+        // Magnetic button effect
+        const magneticButtons = document.querySelectorAll('.btn-26');
+        magneticButtons.forEach(button => {
+            button.addEventListener('mousemove', (e) => {
+                const rect = button.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+                const deltaX = (centerX - x) / 10;
+                const deltaY = (centerY - y) / 10;
+                button.style.setProperty('--x', `${deltaX}px`);
+                button.style.setProperty('--y', `${deltaY}px`);
+            });
+            button.addEventListener('mouseleave', () => {
+                button.style.setProperty('--x', '0px');
+                button.style.setProperty('--y', '0px');
+            });
+        });
+        // Staggered text button animation with delay
+        document.querySelector('.btn-24').addEventListener('mouseenter', function() {
+            const letters = this.querySelectorAll('span');
+            letters.forEach(letter => {
+                // Reset animation to retrigger it
+                letter.style.animation = 'none';
+                setTimeout(() => {
+                    letter.style.animation = 'letterWave 0.8s ease';
+                    letter.style.animationDelay = `calc(0.1s * ${letter.dataset.i || 0})`;
+                }, 10);
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/buttons-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>