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: #0b1020;
color: #e5edff;
border: 2px solid #60a5fa;
filter: drop-shadow(0 0 0 #60a5fa);
height: 52px;
border-radius: 5px;
padding: 0 22px;
font-size: 22px;
font-weight: 700;
letter-spacing: .25px;
cursor: pointer;
outline: none;
user-select: none;
overflow: hidden;
transition: all 0.3s ease;
z-index: 0;
}
.button-container .btn:hover {
filter: drop-shadow(0 0 10px #60a5fa)
}
.button-container .btn::before,
.button-container .btn::after {
content: "";
position: absolute;
inset: -4px;
border-radius: inherit;
pointer-events: none;
}
.button-container .btn::before {
inset: -3px;
padding: 2px;
background: conic-gradient(from 0deg,
#60a5fa,
#a78bfa,
#f472b6,
#60a5fa);
-webkit-mask: linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: spin 4s linear infinite;
z-index: -1;
}
.button-container .btn::after {
background: conic-gradient(from 90deg at top left, #60a5fa 0 90deg, transparent 0) top left / 12px 12px no-repeat, conic-gradient(from 180deg at top right, #60a5fa 0 90deg, transparent 0) top right / 12px 12px no-repeat, conic-gradient(from 0deg at bottom left, #60a5fa 0 90deg, transparent 0) bottom left / 12px 12px no-repeat, conic-gradient(from 270deg at bottom right, #60a5fa 0 90deg, transparent 0) bottom right / 12px 12px no-repeat;
opacity: .8;
}
.button-container .btn span {
background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
animation: shine 3s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(1turn);
}
}
@keyframes shine {
0% {
background-position: 0% center;
}
100% {
background-position: 200% center;
}
}
