27 CSS Button Hover Effects 16 / 27
Particle Burst
Six colored dots shoot out in all directions from the center of the button on hover.
The code
<button class="bhe-16__btn"> <span>Burst!</span> <span class="bhe-16__dot"></span> <span class="bhe-16__dot"></span> <span class="bhe-16__dot"></span> <span class="bhe-16__dot"></span> <span class="bhe-16__dot"></span> <span class="bhe-16__dot"></span> </button>
<button class="bhe-16__btn">
<span>Burst!</span>
<span class="bhe-16__dot"></span>
<span class="bhe-16__dot"></span>
<span class="bhe-16__dot"></span>
<span class="bhe-16__dot"></span>
<span class="bhe-16__dot"></span>
<span class="bhe-16__dot"></span>
</button>.bhe-16__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-16__btn {
position: relative;
overflow: visible;
}
.bhe-16__dot {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -3px 0 0 -3px;
opacity: 0;
}
.bhe-16__btn:hover .bhe-16__dot {
animation: burst 0.65s ease-out forwards;
}
.bhe-16__dot:nth-child(1) {
background: #7c6cff;
--dx: -52px;
--dy: -42px;
}
.bhe-16__dot:nth-child(2) {
background: #ff6c8a;
--dx: 52px;
--dy: -42px;
animation-delay: 0.05s;
}
.bhe-16__dot:nth-child(3) {
background: #2ecc8a;
--dx: -62px;
--dy: 2px;
animation-delay: 0.02s;
}
.bhe-16__dot:nth-child(4) {
background: #f5a623;
--dx: 62px;
--dy: 2px;
animation-delay: 0.07s;
}
.bhe-16__dot:nth-child(5) {
background: #7c6cff;
--dx: -36px;
--dy: 46px;
animation-delay: 0.04s;
}
.bhe-16__dot:nth-child(6) {
background: #ff6c8a;
--dx: 36px;
--dy: 46px;
animation-delay: 0.03s;
}
@keyframes burst {
0% {
opacity: 1;
}
100% {
transform: translate(var(--dx), var(--dy)) scale(0);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.bhe-16__btn,
.bhe-16__btn * {
animation: none !important;
}
}
.bhe-16__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-16__btn {
position: relative;
overflow: visible;
}
.bhe-16__dot {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -3px 0 0 -3px;
opacity: 0;
}
.bhe-16__btn:hover .bhe-16__dot {
animation: burst 0.65s ease-out forwards;
}
.bhe-16__dot:nth-child(1) {
background: #7c6cff;
--dx: -52px;
--dy: -42px;
}
.bhe-16__dot:nth-child(2) {
background: #ff6c8a;
--dx: 52px;
--dy: -42px;
animation-delay: 0.05s;
}
.bhe-16__dot:nth-child(3) {
background: #2ecc8a;
--dx: -62px;
--dy: 2px;
animation-delay: 0.02s;
}
.bhe-16__dot:nth-child(4) {
background: #f5a623;
--dx: 62px;
--dy: 2px;
animation-delay: 0.07s;
}
.bhe-16__dot:nth-child(5) {
background: #7c6cff;
--dx: -36px;
--dy: 46px;
animation-delay: 0.04s;
}
.bhe-16__dot:nth-child(6) {
background: #ff6c8a;
--dx: 36px;
--dy: 46px;
animation-delay: 0.03s;
}
@keyframes burst {
0% {
opacity: 1;
}
100% {
transform: translate(var(--dx), var(--dy)) scale(0);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.bhe-16__btn,
.bhe-16__btn * {
animation: none !important;
}
}
More from 27 CSS Button Hover Effects
Modern 3D Skeuomorphic Button Press EffectsNeo-Brutalist & Cyberpunk Button Glow EffectsSliding Background Color Wipe Button EffectsLiquid Fill & Organic Morphing Button EffectsKinetic Text Flip & Icon Reveal Button EffectsLiquid FillMagnetic BorderGlitch SliceNeon PulseSplit RevealDiagonal ShutterElastic Lift
View the full collection →