A CSS technique demonstrates how to create an elastic/bouncy hover effect using modern CSS features like shape(), sibling-index()/sibling-count(), and linear(). The implementation requires a monospace font and wrapping each letter individually, but avoids text duplication. Currently only works in Chrome, and the author warns against using this technique in production due to accessibility concerns with ARIA on links.

1m read timeFrom css-tip.com
Post cover image
2 Comments

Sort: