27 CSS Button Hover Effects 26 / 27
Sunburst Expand
Spinning conic-gradient rays fan out behind the button on hover, glowing like a sunburst.
The code
<button class="bhe-26__btn"> <div class="bhe-26__rays"></div> <span class="bhe-26__label">Sunburst</span> </button>
<button class="bhe-26__btn">
<div class="bhe-26__rays"></div>
<span class="bhe-26__label">Sunburst</span>
</button>.bhe-26__btn {
font-family: inherit;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-26__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-26__btn:hover {
transform: scale(1.06);
box-shadow: 0 8px 24px rgba(245, 168, 74, 0.5);
}
.bhe-26__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-26__btn:hover .bhe-26__rays {
opacity: 1;
animation: sunburst-spin 6s linear infinite;
}
@keyframes sunburst-spin {
to {
transform: rotate(360deg);
}
}
.bhe-26__label {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.bhe-26__btn,
.bhe-26__btn * {
animation: none !important;
}
}
.bhe-26__btn {
font-family: inherit;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-26__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-26__btn:hover {
transform: scale(1.06);
box-shadow: 0 8px 24px rgba(245, 168, 74, 0.5);
}
.bhe-26__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-26__btn:hover .bhe-26__rays {
opacity: 1;
animation: sunburst-spin 6s linear infinite;
}
@keyframes sunburst-spin {
to {
transform: rotate(360deg);
}
}
.bhe-26__label {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.bhe-26__btn,
.bhe-26__btn * {
animation: none !important;
}
}
More from 27 CSS Button Hover Effects
Morph ShapeIcon Slide InStagger Fill3D PressTypewriter RetypeRipple WaveCursor SpotlightMinimalist Border & Outline Drawing Hover EffectsModern 3D Skeuomorphic Button Press EffectsNeo-Brutalist & Cyberpunk Button Glow EffectsSliding Background Color Wipe Button EffectsLiquid Fill & Organic Morphing Button Effects
View the full collection →