@DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function
document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => {
const style = getComputedStyle(button);
const lines = document.createElement("div");
lines.classList.add("lines");
const groupTop = document.createElement("div");
const groupBottom = document.createElement("div");
const svg = createSVG(
button.offsetWidth,
button.offsetHeight,
parseInt(style.borderRadius, 10)
);
groupTop.appendChild(svg);
groupTop.appendChild(svg.cloneNode(true));
groupTop.appendChild(svg.cloneNode(true));
groupTop.appendChild(svg.cloneNode(true));
groupBottom.appendChild(svg.cloneNode(true));
groupBottom.appendChild(svg.cloneNode(true));
groupBottom.appendChild(svg.cloneNode(true));
groupBottom.appendChild(svg.cloneNode(true));
lines.appendChild(groupTop);
lines.appendChild(groupBottom);
button.appendChild(lines);
button.addEventListener("pointerenter", () => {
button.classList.add("start");
});
svg.addEventListener("animationend", () => {
button.classList.remove("start");
});
});
})
The CSS for start is below
.button-gradient.start .lines svg, .button-transparent.start .lines svg {
animation: stroke 0.3s linear;
}
And this is the corresponding keyframe
@keyframes stroke {
30%, 55% {
opacity: 1;
}
100% {
stroke-dashoffset: 5;
opacity: 0;
}
}
It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
I thought it is easier to achieve this way…
Thanks.
