Spaces:

ProjectGenesis
/

buttons-3

Running

App Files Files Community

ProjectGenesis commited on Jun 27, 2025

Commit

917f594

verified ·

1 Parent(s): 04d4a9e

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 +5 -3
index.html +927 -19

README.md CHANGED Viewed

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

 ---
+title: buttons-3
+emoji: 🐳
 colorFrom: green
 colorTo: gray
 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,927 @@
-<!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>Creative Button Showcase</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        .header h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, #00dbde, #fc00ff);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            margin-bottom: 0.5rem;
+        }
+        .header p {
+            color: #a0aec0;
+            font-size: 1.2rem;
+            max-width: 700px;
+            margin: 0 auto;
+        }
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .btn-container {
+            background: rgba(26, 32, 44, 0.7);
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+            transition: transform 0.3s ease;
+        }
+        .btn-container:hover {
+            transform: translateY(-5px);
+        }
+        .btn-container h3 {
+            color: #e2e8f0;
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+            font-weight: 500;
+        }
+        .btn {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.8rem 1.5rem;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 1rem;
+            border-radius: 8px;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            transform: translateZ(0);
+            will-change: transform;
+        }
+        /* Button 1: Gradient Glow */
+        .btn-1 {
+            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
+            color: white;
+            box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
+        }
+        .btn-1:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 25px rgba(255, 107, 107, 0.6);
+        }
+        /* Button 2: Border Animation */
+        .btn-2 {
+            background: transparent;
+            color: #48bb78;
+            border: 2px solid #48bb78;
+        }
+        .btn-2::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 0;
+            background: #48bb78;
+            z-index: -1;
+            transition: height 0.3s ease;
+        }
+        .btn-2:hover {
+            color: white;
+        }
+        .btn-2:hover::before {
+            height: 100%;
+        }
+        /* Button 3: Neumorphic */
+        .btn-3 {
+            background: #1a202c;
+            color: #a0aec0;
+            box-shadow: 5px 5px 10px #0d1117, -5px -5px 10px #272f3f;
+        }
+        .btn-3:hover {
+            box-shadow: inset 5px 5px 10px #0d1117, inset -5px -5px 10px #272f3f;
+        }
+        /* Button 4: Ripple Effect */
+        .btn-4 {
+            background: #4299e1;
+            color: white;
+            overflow: hidden;
+        }
+        .btn-4::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.6s ease, height 0.6s ease;
+        }
+        .btn-4:hover::after {
+            width: 300px;
+            height: 300px;
+        }
+        /* Button 5: 3D Press */
+        .btn-5 {
+            background: #9f7aea;
+            color: white;
+            box-shadow: 0 6px 0 #805ad5;
+            transform: translateY(0);
+        }
+        .btn-5:hover {
+            transform: translateY(2px);
+            box-shadow: 0 4px 0 #805ad5;
+        }
+        .btn-5:active {
+            transform: translateY(6px);
+            box-shadow: none;
+        }
+        /* Button 6: Icon Animation */
+        .btn-6 {
+            background: #ed64a6;
+            color: white;
+            gap: 8px;
+        }
+        .btn-6 i {
+            transition: transform 0.3s ease;
+        }
+        .btn-6:hover i {
+            transform: translateX(5px);
+        }
+        /* Button 7: Glitch Effect */
+        .btn-7 {
+            background: #0bc5ea;
+            color: white;
+        }
+        .btn-7:hover {
+            animation: glitch 0.3s linear;
+        }
+        @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 8: Gradient Border */
+        .btn-8 {
+            background: #1a202c;
+            color: white;
+            position: relative;
+            z-index: 1;
+        }
+        .btn-8::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, #00dbde, #fc00ff);
+            z-index: -1;
+            border-radius: 8px;
+            padding: 2px;
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+        }
+        .btn-8:hover::before {
+            animation: rotate 1.5s linear infinite;
+        }
+        @keyframes rotate {
+            100% { transform: rotate(360deg); }
+        }
+        /* Button 9: Flip Text */
+        .btn-9 {
+            background: #38b2ac;
+            color: white;
+            perspective: 500px;
+        }
+        .btn-9 span {
+            display: inline-block;
+            transition: transform 0.3s ease;
+        }
+        .btn-9:hover span {
+            transform: rotateX(360deg);
+        }
+        /* Button 10: Liquid Fill */
+        .btn-10 {
+            background: transparent;
+            color: #f6ad55;
+            border: 2px solid #f6ad55;
+            overflow: hidden;
+        }
+        .btn-10::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 0%;
+            background: #f6ad55;
+            z-index: -1;
+            border-radius: 0 0 50% 50%;
+            transition: height 0.5s ease;
+        }
+        .btn-10:hover {
+            color: white;
+        }
+        .btn-10:hover::before {
+            height: 200%;
+        }
+        /* Button 11: Particle Effect */
+        .btn-11 {
+            background: #63b3ed;
+            color: white;
+            overflow: visible;
+        }
+        .btn-11:hover {
+            animation: particles 0.6s ease;
+        }
+        @keyframes particles {
+            0% { box-shadow: 0 0 0 0 rgba(99, 179, 237, 0.4); }
+            100% { box-shadow: 0 0 0 20px rgba(99, 179, 237, 0); }
+        }
+        /* Button 12: Underline Animation */
+        .btn-12 {
+            background: transparent;
+            color: #68d391;
+            position: relative;
+        }
+        .btn-12::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: #68d391;
+            transition: width 0.3s ease;
+        }
+        .btn-12:hover::after {
+            width: 100%;
+        }
+        /* Button 13: Skew Effect */
+        .btn-13 {
+            background: #f56565;
+            color: white;
+            transition: transform 0.3s ease;
+        }
+        .btn-13:hover {
+            transform: skewX(-10deg);
+        }
+        /* Button 14: Bounce */
+        .btn-14 {
+            background: #0bc5ea;
+            color: white;
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+            40% { transform: translateY(-15px); }
+            60% { transform: translateY(-7px); }
+        }
+        /* Button 15: Gradient Shift */
+        .btn-15 {
+            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
+            color: white;
+            background-size: 200% 200%;
+            transition: background-position 0.5s ease;
+        }
+        .btn-15:hover {
+            background-position: 100% 100%;
+        }
+        /* Button 16: Double Border */
+        .btn-16 {
+            background: #1a202c;
+            color: #ecc94b;
+            border: 2px solid #ecc94b;
+            position: relative;
+        }
+        .btn-16::before {
+            content: "";
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            right: 5px;
+            bottom: 5px;
+            border: 2px solid #ecc94b;
+            border-radius: 4px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .btn-16:hover::before {
+            opacity: 1;
+        }
+        /* Button 17: Flip Card */
+        .btn-17 {
+            background: transparent;
+            perspective: 1000px;
+            width: 120px;
+            height: 40px;
+        }
+        .btn-17-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        .btn-17:hover .btn-17-inner {
+            transform: rotateY(180deg);
+        }
+        .btn-17-front, .btn-17-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 8px;
+        }
+        .btn-17-front {
+            background: #9f7aea;
+            color: white;
+        }
+        .btn-17-back {
+            background: #f56565;
+            color: white;
+            transform: rotateY(180deg);
+        }
+        /* Button 18: Shine Effect */
+        .btn-18 {
+            background: #2d3748;
+            color: #a0aec0;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-18::after {
+            content: "";
+            position: absolute;
+            top: -50%;
+            left: -60%;
+            width: 20px;
+            height: 200%;
+            background: rgba(255, 255, 255, 0.2);
+            transform: rotate(30deg);
+            transition: all 0.6s;
+        }
+        .btn-18:hover::after {
+            left: 120%;
+        }
+        /* Button 19: Text Shadow */
+        .btn-19 {
+            background: #4a5568;
+            color: white;
+            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+            transition: text-shadow 0.3s ease;
+        }
+        .btn-19:hover {
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
+        }
+        /* Button 20: Pulse */
+        .btn-20 {
+            background: #ed8936;
+            color: white;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(237, 137, 54, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(237, 137, 54, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(237, 137, 54, 0); }
+        }
+        /* Button 21: Corner Fold */
+        .btn-21 {
+            background: #38a169;
+            color: white;
+            position: relative;
+        }
+        .btn-21::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            border-style: solid;
+            border-width: 0 20px 20px 0;
+            border-color: transparent #1a202c transparent transparent;
+            transition: all 0.3s ease;
+        }
+        .btn-21:hover::before {
+            border-width: 0 0 0 0;
+        }
+        /* Button 22: Gradient Text */
+        .btn-22 {
+            background: #1a202c;
+            color: transparent;
+            background-clip: text;
+            -webkit-background-clip: text;
+            position: relative;
+            border: 2px solid transparent;
+            background-image: linear-gradient(45deg, #00dbde, #fc00ff);
+        }
+        .btn-22::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, #00dbde, #fc00ff);
+            z-index: -1;
+            border-radius: 8px;
+            padding: 2px;
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+        }
+        /* Button 23: Rotate */
+        .btn-23 {
+            background: #e53e3e;
+            color: white;
+            transition: transform 0.5s ease;
+        }
+        .btn-23:hover {
+            transform: rotate(10deg);
+        }
+        /* Button 24: Depth Effect */
+        .btn-24 {
+            background: linear-gradient(to bottom, #4299e1, #2b6cb0);
+            color: white;
+            box-shadow: 0 4px 0 #2b6cb0;
+            position: relative;
+            transition: all 0.2s ease;
+        }
+        .btn-24:hover {
+            transform: translateY(2px);
+            box-shadow: 0 2px 0 #2b6cb0;
+        }
+        .btn-24:active {
+            transform: translateY(4px);
+            box-shadow: none;
+        }
+        /* Button 25: Neon Glow */
+        .btn-25 {
+            background: #1a202c;
+            color: #ff00ff;
+            border: 2px solid #ff00ff;
+            box-shadow: 0 0 10px #ff00ff, inset 0 0 10px #ff00ff;
+            text-shadow: 0 0 5px #ff00ff;
+            transition: all 0.3s ease;
+        }
+        .btn-25:hover {
+            box-shadow: 0 0 20px #ff00ff, inset 0 0 20px #ff00ff;
+        }
+        /* Button 26: Slide Text */
+        .btn-26 {
+            background: #4a5568;
+            color: white;
+            overflow: hidden;
+            position: relative;
+        }
+        .btn-26 span {
+            display: block;
+            transition: transform 0.3s ease;
+        }
+        .btn-26::after {
+            content: "Hover!";
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.3s ease;
+        }
+        .btn-26:hover span {
+            transform: translateY(-100%);
+        }
+        .btn-26:hover::after {
+            transform: translateY(-100%);
+        }
+        /* Button 27: Glass Morphism */
+        .btn-27 {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.3s ease;
+        }
+        .btn-27:hover {
+            background: rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        /* Button 28: Scale */
+        .btn-28 {
+            background: #f6e05e;
+            color: #1a202c;
+            transition: transform 0.3s ease;
+        }
+        .btn-28:hover {
+            transform: scale(1.1);
+        }
+        /* Button 29: Gradient Shadow */
+        .btn-29 {
+            background: #805ad5;
+            color: white;
+            position: relative;
+        }
+        .btn-29::after {
+            content: "";
+            position: absolute;
+            top: 10px;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, #00dbde, #fc00ff);
+            z-index: -1;
+            filter: blur(10px);
+            opacity: 0.7;
+            transition: opacity 0.3s ease;
+        }
+        .btn-29:hover::after {
+            opacity: 1;
+        }
+        /* Button 30: Morph */
+        .btn-30 {
+            background: #00b5d8;
+            color: white;
+            transition: all 0.5s ease;
+        }
+        .btn-30:hover {
+            border-radius: 30px;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .grid-container {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            }
+            .header h1 {
+                font-size: 2.5rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .grid-container {
+                grid-template-columns: 1fr;
+            }
+            .header h1 {
+                font-size: 2rem;
+            }
+            .header p {
+                font-size: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Creative Button Showcase</h1>
+        <p>Explore 30 unique button designs with modern animations and hover effects</p>
+    </div>
+    <div class="grid-container">
+        <!-- Button 1 -->
+        <div class="btn-container">
+            <h3>Gradient Glow</h3>
+            <button class="btn btn-1">Hover Me</button>
+        </div>
+        <!-- Button 2 -->
+        <div class="btn-container">
+            <h3>Border Animation</h3>
+            <button class="btn btn-2">Hover Me</button>
+        </div>
+        <!-- Button 3 -->
+        <div class="btn-container">
+            <h3>Neumorphic</h3>
+            <button class="btn btn-3">Hover Me</button>
+        </div>
+        <!-- Button 4 -->
+        <div class="btn-container">
+            <h3>Ripple Effect</h3>
+            <button class="btn btn-4">Hover Me</button>
+        </div>
+        <!-- Button 5 -->
+        <div class="btn-container">
+            <h3>3D Press</h3>
+            <button class="btn btn-5">Press Me</button>
+        </div>
+        <!-- Button 6 -->
+        <div class="btn-container">
+            <h3>Icon Animation</h3>
+            <button class="btn btn-6">
+                <span>Hover Me</span>
+                <i class="fas fa-arrow-right"></i>
+            </button>
+        </div>
+        <!-- Button 7 -->
+        <div class="btn-container">
+            <h3>Glitch Effect</h3>
+            <button class="btn btn-7">Hover Me</button>
+        </div>
+        <!-- Button 8 -->
+        <div class="btn-container">
+            <h3>Gradient Border</h3>
+            <button class="btn btn-8">Hover Me</button>
+        </div>
+        <!-- Button 9 -->
+        <div class="btn-container">
+            <h3>Flip Text</h3>
+            <button class="btn btn-9"><span>Hover Me</span></button>
+        </div>
+        <!-- Button 10 -->
+        <div class="btn-container">
+            <h3>Liquid Fill</h3>
+            <button class="btn btn-10">Hover Me</button>
+        </div>
+        <!-- Button 11 -->
+        <div class="btn-container">
+            <h3>Particle Effect</h3>
+            <button class="btn btn-11">Hover Me</button>
+        </div>
+        <!-- Button 12 -->
+        <div class="btn-container">
+            <h3>Underline Animation</h3>
+            <button class="btn btn-12">Hover Me</button>
+        </div>
+        <!-- Button 13 -->
+        <div class="btn-container">
+            <h3>Skew Effect</h3>
+            <button class="btn btn-13">Hover Me</button>
+        </div>
+        <!-- Button 14 -->
+        <div class="btn-container">
+            <h3>Bounce</h3>
+            <button class="btn btn-14">Bounce Me</button>
+        </div>
+        <!-- Button 15 -->
+        <div class="btn-container">
+            <h3>Gradient Shift</h3>
+            <button class="btn btn-15">Hover Me</button>
+        </div>
+        <!-- Button 16 -->
+        <div class="btn-container">
+            <h3>Double Border</h3>
+            <button class="btn btn-16">Hover Me</button>
+        </div>
+        <!-- Button 17 -->
+        <div class="btn-container">
+            <h3>Flip Card</h3>
+            <button class="btn btn-17">
+                <div class="btn-17-inner">
+                    <div class="btn-17-front">Front</div>
+                    <div class="btn-17-back">Back</div>
+                </div>
+            </button>
+        </div>
+        <!-- Button 18 -->
+        <div class="btn-container">
+            <h3>Shine Effect</h3>
+            <button class="btn btn-18">Hover Me</button>
+        </div>
+        <!-- Button 19 -->
+        <div class="btn-container">
+            <h3>Text Shadow</h3>
+            <button class="btn btn-19">Hover Me</button>
+        </div>
+        <!-- Button 20 -->
+        <div class="btn-container">
+            <h3>Pulse</h3>
+            <button class="btn btn-20">Hover Me</button>
+        </div>
+        <!-- Button 21 -->
+        <div class="btn-container">
+            <h3>Corner Fold</h3>
+            <button class="btn btn-21">Hover Me</button>
+        </div>
+        <!-- Button 22 -->
+        <div class="btn-container">
+            <h3>Gradient Text</h3>
+            <button class="btn btn-22">Hover Me</button>
+        </div>
+        <!-- Button 23 -->
+        <div class="btn-container">
+            <h3>Rotate</h3>
+            <button class="btn btn-23">Hover Me</button>
+        </div>
+        <!-- Button 24 -->
+        <div class="btn-container">
+            <h3>Depth Effect</h3>
+            <button class="btn btn-24">Press Me</button>
+        </div>
+        <!-- Button 25 -->
+        <div class="btn-container">
+            <h3>Neon Glow</h3>
+            <button class="btn btn-25">Hover Me</button>
+        </div>
+        <!-- Button 26 -->
+        <div class="btn-container">
+            <h3>Slide Text</h3>
+            <button class="btn btn-26"><span>Hover Me</span></button>
+        </div>
+        <!-- Button 27 -->
+        <div class="btn-container">
+            <h3>Glass Morphism</h3>
+            <button class="btn btn-27">Hover Me</button>
+        </div>
+        <!-- Button 28 -->
+        <div class="btn-container">
+            <h3>Scale</h3>
+            <button class="btn btn-28">Hover Me</button>
+        </div>
+        <!-- Button 29 -->
+        <div class="btn-container">
+            <h3>Gradient Shadow</h3>
+            <button class="btn btn-29">Hover Me</button>
+        </div>
+        <!-- Button 30 -->
+        <div class="btn-container">
+            <h3>Morph</h3>
+            <button class="btn btn-30">Hover Me</button>
+        </div>
+    </div>
+    <script>
+        // Ripple effect implementation
+        document.querySelectorAll('.btn-4').forEach(button => {
+            button.addEventListener('click', function(e) {
+                // Remove existing ripples
+                const ripples = this.getElementsByClassName('ripple');
+                while(ripples[0]) {
+                    ripples[0].parentNode.removeChild(ripples[0]);
+                }
+                // Create ripple
+                const circle = document.createElement("span");
+                circle.classList.add("ripple");
+                // Get dimensions
+                const d = Math.max(this.clientWidth, this.clientHeight);
+                // Set styles
+                circle.style.width = circle.style.height = d + "px";
+                circle.style.left = e.offsetX - d/2 + "px";
+                circle.style.top = e.offsetY - d/2 + "px";
+                // Add to button
+                this.appendChild(circle);
+            });
+        });
+    </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-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>