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);
}
}