Modern CSS Transitions

Polished hover and focus transitions for buttons, cards and links that work on any .btn or .card.

1Morphing Gradient

A gradient button that softly changes to a second gradient and morphs into a pill on hover. Class: fx-morphing-gradient

<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
  <button type="button" class="btn btn-lg fx-morphing-gradient">Book a demo</button>
  <button type="button" class="btn fx-morphing-gradient"><i class="bi bi-download" aria-hidden="true"></i> Download</button>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-morphing-gradient, .btn.fx-morphing-gradient {
  position: relative; isolation: isolate; overflow: hidden; z-index: 0; border: 0;
  color: var(--wt-on-primary, #fff); border-radius: .6rem;
  background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
  transition: border-radius .5s ease, transform .5s ease, box-shadow .5s;
}
.fx-morphing-gradient::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(135deg, var(--wt-accent), var(--wt-primary));
  transition: opacity .5s ease;
}
.fx-morphing-gradient:hover, .fx-morphing-gradient:focus-visible, .btn.fx-morphing-gradient:hover, .btn.fx-morphing-gradient:focus-visible {
  color: var(--wt-on-primary, #fff); border-radius: 2rem; transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(var(--wt-accent-rgb), .7);
}
.fx-morphing-gradient:hover::before, .fx-morphing-gradient:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fx-morphing-gradient, .fx-morphing-gradient::before, .fx-morphing-gradient::after, .fx-morphing-gradient *, .fx-morphing-gradient *::before, .fx-morphing-gradient *::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

release

<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
  <button type="button" class="btn btn-primary fx-elastic-scale">Add to cart</button>
  <span class="badge rounded-full text-bg-secondary text-base fx-elastic-scale">release</span> <a href="#" class="btn btn-outline-primary rounded-full text-lg fx-elastic-scale" aria-label="Cart, $43.08"><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; }
}