`clip-path` buttons

clip-path is really underrated

one way w/ css 🪄 stack an image 2x... filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }show more

The subtle differences when creating a squircle 🧐 Use... a generated CSS clip-path to get a finer shape 🤙 .squircle { clip-path: polygon( 100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, ... ); } Went down the rabbit hole 🐇show more

Just made my first 10-second Grok clip. Be the... penguin. Walk the vertical path.show more

buttons ❤️‍🔥

hitting buttons

Regretevator buttons

#KAI: buttons 🫦

Buttons babe ✨

I got buttons!

I like buttons

UI && CSS Tip! 🚀 You can use View... Transitions to create that Radix by WorkOS style theme switcher 👀 ::view-transition-new(root) { animation: reveal;} keyframes reveal { 0% { clip-path: polygon(...);} /* Code 👇 */ } Animate clip-path between modes 😍 CodePen.IO link below! 👇show more

C.O.M.B.O. Buttons open from the top - this allows... you to customize your buttons even when they're installed! #COMBObuttonshow more

Buttons in Notion 😍

How to customize buttons

Animating buttons never gets old

he yearns for the buttons

This clip-on reading light attaches neatly to the cover,... with easy-to-reach side buttons that let you adjust brightness or switch it on and off without losing your place.show more

I guess the buttons are inside?

Ill give these buttons a break