# CSS only elastic hover effect

DevFeed: [CSS only elastic hover effect](<https://devfeed.tech/articles/css-only-elastic-hover-effect-37266.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/elastic-hover-effect/>)

Author: Stanko

Published: 2018-03-19T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [how to create smooth CSS transitions](<https://devfeed.tech/topics/how-to-create-smooth-css-transitions.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [custom](<https://devfeed.tech/tags/custom.md>), [effect](<https://devfeed.tech/tags/effect.md>)

## AI overview

A tutorial explaining how to create an elastic hover effect for buttons using CSS. It uses ellipse pseudo-elements that scale on hover, slight button zooming, and custom elastic Bézier easing; a wireframe version is also included.

## Source excerpt

Some CSS fun. Lately I've stumbled upon couple of websites with elastic hover effect on buttons. Each one was using SVG morphing, which is fine, but I was wondering how hard would it be to implement it in CSS. It ended up up being pretty easy. I created four pseudo elementsOnly two pseudo elements (::before and ::after) can be created per element, therefore each button has one additional div inside it.. Each of these is ellipse, running along one edge of the button. By default these are scaled to zero by relevant axis. On hover, they scale back to their full size. For effect, whole button zoom in a little bit. Combine all of that with custom elastic bezier easing, and it looks quite convincing. Wireframe version is included as well, to make it easier to see how it works.