Polished hover and focus transitions for buttons, cards and links that work on any .btn or .card.
1Neon Fill Button
An outline button that fills with colour from the left and glows; works on any .btn or link. Class: fx-neon-fill-button
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<button type="button" class="btn btn-lg fx-neon-fill-button">Join now</button>
<a href="#" class="btn fx-neon-fill-button rounded-pill">Learn more <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-neon-fill-button, .btn.fx-neon-fill-button {
position: relative; isolation: isolate; overflow: hidden; z-index: 0;
color: var(--wt-primary-ink); background: transparent; border: 2px solid var(--wt-primary);
transition: color .35s ease, box-shadow .35s ease;
}
.fx-neon-fill-button::before {
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wt-primary);
transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(.7, 0, .3, 1);
}
.fx-neon-fill-button:hover, .fx-neon-fill-button:focus-visible, .btn.fx-neon-fill-button:hover, .btn.fx-neon-fill-button:focus-visible {
color: var(--wt-on-primary, #fff); border-color: var(--wt-primary);
box-shadow: 0 0 12px rgba(var(--wt-primary-rgb), .6), 0 0 32px rgba(var(--wt-primary-rgb), .35);
}
.fx-neon-fill-button:hover::before, .fx-neon-fill-button:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.fx-neon-fill-button, .fx-neon-fill-button::before, .fx-neon-fill-button::after, .fx-neon-fill-button *, .fx-neon-fill-button *::before, .fx-neon-fill-button *::after { animation: none !important; transition: none !important; }
}2Magnetic Hover
Fakes a magnetic pull: the element lifts toward the pointer and its icon leans further with an elastic ease. Class: fx-magnetic-hover
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<button type="button" class="btn btn-primary btn-lg rounded-pill fx-magnetic-hover"><span>Contact us</span> <span><i class="bi bi-arrow-right" aria-hidden="true"></i></span></button>
<a href="#" class="btn btn-outline-primary rounded-circle fx-magnetic-hover" aria-label="Send"><i class="bi bi-send-fill" aria-hidden="true"></i></a>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-magnetic-hover { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s; }
.fx-magnetic-hover > * { display: inline-block; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.fx-magnetic-hover:hover, .fx-magnetic-hover:focus-visible { transform: translate(3px, -4px) scale(1.06); box-shadow: -6px 12px 22px -10px rgba(var(--wt-primary-rgb), .6); }
.fx-magnetic-hover:hover > *, .fx-magnetic-hover:focus-visible > * { transform: translate(3px, -2px); }
@media (prefers-reduced-motion: reduce) {
.fx-magnetic-hover, .fx-magnetic-hover::before, .fx-magnetic-hover::after, .fx-magnetic-hover *, .fx-magnetic-hover *::before, .fx-magnetic-hover *::after { animation: none !important; transition: none !important; }
}