CSS
.bhe-10__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-10__btn {
position: relative;
overflow: visible;
}
.bhe-10__dot {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -3px 0 0 -3px;
opacity: 0;
}
.bhe-10__btn:hover .bhe-10__dot {
animation: burst 0.65s ease-out forwards;
}
.bhe-10__dot:nth-child(1) {
background: #7c6cff;
--dx: -52px;
--dy: -42px;
}
.bhe-10__dot:nth-child(2) {
background: #ff6c8a;
--dx: 52px;
--dy: -42px;
animation-delay: 0.05s;
}
.bhe-10__dot:nth-child(3) {
background: #2ecc8a;
--dx: -62px;
--dy: 2px;
animation-delay: 0.02s;
}
.bhe-10__dot:nth-child(4) {
background: #f5a623;
--dx: 62px;
--dy: 2px;
animation-delay: 0.07s;
}
.bhe-10__dot:nth-child(5) {
background: #7c6cff;
--dx: -36px;
--dy: 46px;
animation-delay: 0.04s;
}
.bhe-10__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-10__btn,
.bhe-10__btn * {
animation: none !important;
}
}