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.
5 Replies
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
I personally prefer using masks in css.
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
you can also just set an svg as a background image on a button
there's so many ways to ... crumble the cookie?
by the way, there's also the full svg with inline html using foreign objects