Modern CSS Transitions

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

1Glassmorphism Hover

A frosted-glass card that turns clearer, brighter and lifts when hovered; place it over a colourful background. Class: fx-glassmorphism-hover

Ivy Brennan

Customer Success

Frosted glass that clears on hover.

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100 rounded-4" style="min-height:200px;background:radial-gradient(circle at 20% 25%, var(--wt-accent) 0 18%, transparent 19%),radial-gradient(circle at 82% 75%, var(--wt-secondary) 0 22%, transparent 23%),linear-gradient(135deg, var(--wt-primary), var(--wt-secondary))">
  <div class="fx-glassmorphism-hover rounded-4 p-3" style="width:14rem">
    <div class="d-flex align-items-center gap-2 mb-2">
      <img src="../assets/img/avatar-6.svg" alt="Member avatar" class="rounded-circle" style="width:40px;height:40px">
      <div>
        <div class="fw-semibold small">
          Ivy Brennan
        </div>
        <div class="small opacity-75">
          Customer Success
        </div>
      </div>
    </div>
    <p class="small mb-0">Frosted glass that clears on hover.</p>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-glassmorphism-hover {
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transition: background .45s, backdrop-filter .45s, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s;
}
.fx-glassmorphism-hover:hover, .fx-glassmorphism-hover:focus-within {
  background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fx-glassmorphism-hover { background: rgba(var(--wt-primary-rgb), .82); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glassmorphism-hover, .fx-glassmorphism-hover::before, .fx-glassmorphism-hover::after, .fx-glassmorphism-hover *, .fx-glassmorphism-hover *::before, .fx-glassmorphism-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

product

<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">product</span> <a href="#" class="btn btn-outline-primary rounded-circle fs-5 fx-elastic-scale" aria-label="Cart, $50.80"><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; }
}