Custom Kuromi Shaped Buttons

Hey I wanted to know if its possible to create custom buttons like these with CSS only. Its been a while since I've used css and I've forgotten quite alot. I was trying to make this "Kuromi Calculator App" with a hidden chat in it for my sister's birthday gift, Wanted to know if those buttons are possible, talking about the ones with the custom head shape, not the heart shaped ones.
No description
5 Replies
Jochem
Jochem3w ago
Possible? Yup! Easy? Not if you don't already have the SVG path for the buttons, or know how to make it. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Tok124 (CSS Nerd)
I personally prefer using masks in css.
ἔρως
ἔρως3w ago
masks are a performance killer clip-path is easier to handle but if you design it in inkscape, it takes just a few minutes to make it work
Jochem
Jochem3w ago
you can also just set an svg as a background image on a button
ἔρως
ἔρως3w ago
there's so many ways to ... crumble the cookie? by the way, there's also the full svg with inline html using foreign objects
Want results from more Discord servers?
Add your server