CSS
.bhe-20__btn {
font-family: inherit;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-20__btn {
position: relative;
overflow: hidden;
padding: 12px 40px;
border-radius: 50px;
border: none;
background: #f5a84a;
color: #0a0a0f;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition:
transform 0.3s,
box-shadow 0.3s;
}
.bhe-20__btn:hover {
transform: scale(1.06);
box-shadow: 0 8px 24px rgba(245, 168, 74, 0.5);
}
.bhe-20__rays {
position: absolute;
inset: -40%;
background: conic-gradient(
transparent 0deg,
rgba(255, 255, 255, 0.2) 10deg,
transparent 20deg,
rgba(255, 255, 255, 0.2) 30deg,
transparent 40deg,
rgba(255, 255, 255, 0.2) 50deg,
transparent 60deg,
rgba(255, 255, 255, 0.2) 70deg,
transparent 80deg,
rgba(255, 255, 255, 0.2) 90deg,
transparent 100deg,
rgba(255, 255, 255, 0.2) 110deg,
transparent 120deg,
rgba(255, 255, 255, 0.2) 130deg,
transparent 140deg,
rgba(255, 255, 255, 0.2) 150deg,
transparent 160deg,
rgba(255, 255, 255, 0.2) 170deg,
transparent 180deg,
rgba(255, 255, 255, 0.2) 190deg,
transparent 200deg,
rgba(255, 255, 255, 0.2) 210deg,
transparent 220deg,
rgba(255, 255, 255, 0.2) 230deg,
transparent 240deg,
rgba(255, 255, 255, 0.2) 250deg,
transparent 260deg,
rgba(255, 255, 255, 0.2) 270deg,
transparent 280deg,
rgba(255, 255, 255, 0.2) 290deg,
transparent 300deg,
rgba(255, 255, 255, 0.2) 310deg,
transparent 320deg,
rgba(255, 255, 255, 0.2) 330deg,
transparent 340deg,
rgba(255, 255, 255, 0.2) 350deg
);
opacity: 0;
transition: opacity 0.3s;
}
.bhe-20__btn:hover .bhe-20__rays {
opacity: 1;
animation: sunburst-spin 6s linear infinite;
}
@keyframes sunburst-spin {
to {
transform: rotate(360deg);
}
}
.bhe-20__label {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.bhe-20__btn,
.bhe-20__btn * {
animation: none !important;
}
}