Spaces:
Running
Running
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
917f594
verified
| <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> |