Modern CSS Transitions
Polished hover and focus transitions for buttons, cards and links that work on any .btn or .card.
1Magnetic 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>Say hello</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; }
}2Elastic Scale
Buttons, chips and cards that grow with a rubbery overshoot on hover and squash when pressed. Class: fx-elastic-scale
<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 fx-elastic-scale">Save</button>
<span class="badge rounded-pill text-bg-secondary fs-6 fx-elastic-scale">how-to</span> <a href="#" class="btn btn-outline-primary rounded-circle fs-5 fx-elastic-scale" aria-label="Cart, $51.72"><i class="bi bi-cart3" aria-hidden="true"></i></a>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-elastic-scale { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.fx-elastic-scale:hover, .fx-elastic-scale:focus-visible { transform: scale(1.08); }
.fx-elastic-scale:active { transform: scale(.94); transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) {
.fx-elastic-scale, .fx-elastic-scale::before, .fx-elastic-scale::after, .fx-elastic-scale *, .fx-elastic-scale *::before, .fx-elastic-scale *::after { animation: none !important; transition: none !important; }
}