This animated CSS-only button was inspired by [Tyler Sticka's Rubber Button](https://cloudfour.com/thinks/rubber-button/). Instead of using SVG to crea...

<div><p>This animated CSS-only button was inspired by <a href="https://cloudfour.com/thinks/rubber-button/">Tyler Sticka's Rubber Button</a>. Instead of using SVG to create the shapes, it directly applies the paths with the <code>path()</code> function on <code>clip-path</code>, that way the button looks square on rest, convex on hover, and concave when active.</p>

<p>Adding transitions for the <code>clip-path</code> and <code>background-color</code>, it gives the impression that the button is ellastic and even a bit bouncy when it's clicked.</p>

<p>Things that we can learn from this demo:</p>

<ul>
<li>Custom properties/CSS variables</li>
<li>
<code>clip-path</code> with <code>path()</code>
</li>
<li>Transitions</li>
<li>Button states</li>
</ul>

<p>Unfortunately, the <code>path()</code> function only takes absolute values at the moment, so this button is not responsive. A width and a height must be specified, and the paths must be custom made to those values.</p></div>

Animated Button with clip-path

You might also like: