* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0a0a;
font-family: Arial, sans-serif;
}
h1 {
color: #fff;
margin: 50px 15px;
text-align: center;
font-size: 30px;
}
.button-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 50px;
}
.luminous-btn {
cursor: pointer;
font-size: 20px;
border-radius: 18px;
border: none;
padding: 2px;
background: radial-gradient(circle 90px at 80% -10%, #ff00ff, #111);
position: relative;
overflow: hidden;
text-transform: uppercase;
}
.luminous-btn::after {
content: "";
position: absolute;
width: 65%;
height: 60%;
border-radius: 120px;
top: 0;
right: 0;
box-shadow: 0 0 25px #ff00ff80;
z-index: -1;
}
.glow-orb {
position: absolute;
width: 80px;
height: 100%;
border-radius: 16px;
bottom: 0;
left: 0;
background: radial-gradient(circle 60px at 0% 100%, #ff3fe9, #6a00ff90, transparent);
box-shadow: -10px 10px 40px #ff00ff40;
animation: orbFloat 4s infinite ease-in-out alternate;
}
.btn-core {
padding: 14px 32px;
border-radius: 16px;
color: #fff;
font-weight: 600;
letter-spacing: 1px;
position: relative;
background: radial-gradient(circle 80px at 80% -50%, #2a2a2a, #0f0f1f);
z-index: 3;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-core::before {
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 16px;
background: radial-gradient(circle 60px at 0% 100%, #ff00ff22, #00f7ff22, transparent);
position: absolute;
}
/* Hover effect */
.luminous-btn:hover .btn-core {
transform: scale(1.07);
box-shadow: 0 0 20px #ff00ff66, 0 0 40px #00f7ff66;
}
@keyframes orbFloat {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(-10px) scale(1.1);
}
}
