Been playing around with the idea of bringing back some fancy buttons for a project I am working ...

Been playing around with the idea of bringing back some fancy buttons for a project I am working ...Been playing around with the idea of bringing back some fancy buttons for a project I am working ...

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Sam Baines

• Dec 22

Been playing around with the idea of bringing back some fancy buttons for a project I am working on. Buttons that feel alive and have subtle interaction states like patterns which glow on hover.

These are actually really complex to make in Figma and even more so in HTML/CSS due to the inset borders and outlines around the end shapes.

Its been really fun to explore!

CSS Figma design

Maxim Vellinga

pro

• Dec 22

This is really cool, you should look into Rive and their n-slicing tool to build a responsive version of this effect. (And animate it 😉 )

Sam Baines

• Dec 22

I'm a Rive user and can do the n-slicing, but its actually really over engineered when you can actually do this nicely and have it animate and progressively enhance with pure CSS and HTML - eliminating the need to have to load any scripts. I'd be interested to see performance impact of Rive vs native.

Maxim Vellinga

pro

• Dec 23

For performance, native is usually my first choice. At scale though, it can become a trade-off when the time investment required outweighs the benefits.