Buttons Style 2

HTML
<h1>Buttons Style : Demo 2</h1> <div class="button-container"> <button class="btn">Button</button> <button class="btn">Button</button> <button class="btn">Button</button> <button class="btn">Button</button> </div>
CSS
body { font-family: Arial, Helvetica, sans-serif; background: #0f172a; color: #e8f1ff; } h1 { color: #fff; margin: 50px 15px; text-align: center; font-size: 30px; } .button-container { display: flex; gap: 50px; flex-wrap: wrap; justify-content: center; align-items: center; } .button-container .btn { position: relative; background: radial-gradient(160px 80px at 20% 120%, #38bdf855, transparent), radial-gradient(180px 90px at 80% -20%, #c084fc55, transparent), radial-gradient(200px 100px at 30% 30%, #f472b655, transparent), radial-gradient(220px 110px at 70% 80%, #22c55e55, transparent), radial-gradient(250px 120px at 90% 50%, #facc1555, transparent), linear-gradient(135deg, #0ea5e9, #6366f1, #a855f7); color: white; border: 1px solid rgba(255, 255, 255, .22); height: 52px; font-size: 20px; padding: 0 26px; border-radius: 10px; font-weight: 700; letter-spacing: .25px; cursor: pointer; outline: none; user-select: none; overflow: hidden; transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); animation: floaty 4s ease-in-out infinite; } .button-container .btn::before { content: ""; position: absolute; inset: -120%; background: conic-gradient(from 0deg, transparent 0 85%, rgba(255, 255, 255, .7) 86% 88%, transparent 89% 100%); animation: btnbg 6s linear infinite; mix-blend-mode: screen; opacity: .45; } .button-container .btn::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); } .button-container .btn:hover::after { animation: shine 1.2s ease forwards; } .button-container .btn:hover { transform: scale(1.08); filter: brightness(1.2); box-shadow: 0 0 25px rgba(99, 102, 241, 0.6), 0 0 50px rgba(168, 85, 247, 0.5); } .button-container .btn:active { transform: scale(0.96); filter: brightness(0.9); } /* Animations */ @keyframes btnbg { to { transform: rotate(1turn) } } @keyframes shine { 0% { left: -100%; } 100% { left: 120%; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
JavaScript