Elastic Scale
Scale(1.15) on hover with cubic-bezier(0.34, 1.56, 0.64, 1) — the element overshoots the target by ~8% before settling: a visible elastic bounce. Scale(0.95) on click via :active. No JavaScript.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0359-root root centers a .hover-box.hover-elastic block of 200 × 200 px on a #0a0a0f background. The element carries a transform .5s cubic-bezier(.34, 1.56, .64, 1) transition — this cubic Bezier curve has a control point above 1 (1.56), allowing it to overshoot the target value before coming back. The overshoot is about 8%: for scale(1.15), the element briefly reaches ~scale(1.24) before settling at 1.15.
On hover (or focus), transform: scale(1.15) triggers the bouncy transition. On click (:active), transform: scale(0.95) with a shorter transition (0.1 s) gives immediate tactile feedback. The hover-bounce + active-shrink combination simulates the physics of a soft object you touch that presses in on contact.
Measured in Chromium 151: overshoot visible (~8%), :active immediate, two copies on a page — only the hovered one animates.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, transition and transform are cancelled; on hover the element shows a fixedfilter: brightness(1.15)— the change is visible without motion. - Keyboard: the element is a natively focusable
<button>. The:focus-visiblerule triggers the same elastic scale(1.15); an indigo outline marks the focus state. - Overflow: the scale enlarges the element beyond its footprint; on a tight grid, the neighbor may be obscured. Add
overflow: hiddenor enough padding on the parent container. - Click:
:activemakes the click physically perceptible without JavaScript. Ensure the click action is also accessible via keyboard (Enter / Space).
Browser compatibility
Pure CSS (transform: scale, cubic-bezier, transition, :active, :focus-visible, prefers-reduced-motion), no JavaScript. Measured in Chromium 151: overshoot visible, :active immediate, two independent copies. Works in all modern browsers.
Without a cubic-bezier with overshoot, use ease-out: the scale stays smooth without a bounce. Without transition, the scale is instant but functional.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0359-root">
<button class="hover-box hover-elastic" type="button">
<span>…</span>
</button>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Bounce amplitude (CSS — cubic-bezier(.34, 1.56, .64, 1)) |
Second control point at 1.56 → overshoot ~8% | Increase the y value of the 2nd control point: 1.7 gives ~20% overshoot; 1.2 gives a slight tremor. Reduce to 1.0 to remove the bounce. |
Target scale (CSS — scale(1.15)) |
15% enlargement | scale(1.08) for a subtle effect; scale(1.3) for a strong one. On wide elements, 1.08–1.1 avoids overflow onto neighbors. |
Click scale (CSS — :active { scale(.95) }) |
5% shrink | scale(.9) for a more pronounced dip; remove the :active block to disable tactile click feedback. |
Duration (CSS — transition: transform .5s) |
500 ms | .3s makes the bounce snappier but less visible; .7s makes it bouncier and more pronounced. |
Background color (CSS — background of .hover-elastic) |
linear-gradient(135deg, #14b8a6, #0d9488) |
Replace with any color or gradient. The elastic effect is independent of the background. |
FAQ
cubic-bezier(0.34, 1.56, 0.64, 1) means: slow start, ~8% overshoot mid-course, landing at the target value.transform: scale visually enlarges the element without changing the layout (the flow stays intact). Add overflow: hidden to the grid container or use an explicit z-index on the hovered element to display it in front of neighbors.:hover (for entry). For example, entry with overshoot (cubic-bezier(.34,1.56,.64,1)) and fast exit (ease-in .2s).
