Sunburst Expand
Spinning conic-gradient rays fan out behind the button on hover, glowing like a sunburst.
Sunburst Expand the 20th of 21 designs in the 21 CSS Button Hover Effects collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="bhe-20__btn"> <div class="bhe-20__rays"></div> <span class="bhe-20__label">Sunburst</span> </button>
.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;
}
}