jh3y

Pure CSS Cyberpunk 2077 Buttons 😎

Buttons with simple clip path animations on focus...

<div><p>Buttons with simple clip path animations on focus</p></div>

jdillon

Clip path button focus effects, updated to support mobile browsers

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>

Buttons using the tag:clip-path

Buttons using the tag:
clip-path