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
c4ef564
verified
| <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> |