I painstakingly recreated a Mario Paint button in CSS. All the "minimal" css frameworks out there use flat design, which is against everything I stand for, so I had to do something about it.

Follow

“how to build a magical 3d button with css”
good timing, apparently the techniques i used are slow and wnergy consuming . i’ll have to see how much i can incorporate from this.

joshwcomeau.com/animation/3d-b

oh! their solution uses an extra element. hmm. hmmmn. sorta defeats my aim of growing it into a “drop in” css. i wanna make a mariopaint.css and a mac classic css, and a platinum css to sit next to 98.css and nes.css.
ideally css shouldn’t ask the author to make special markup that will work only with that css file.

@KamareDrache i use all the css cheat codes to keep to a single button element: pseudo elements, box shadows, and animated gradient fills. but apparently box shadows eat up cpu? i didn’t have an issue on my 8 year old macbook.

@zens Yup, ideally you should indeed use more elements (a couple of span and their before/after) and play with opacity/transform/(maybe filters) instead of changing the `box-shadow`.

Anyway, the result of what you did is just amazing! 😍

Once on the demo page, I immediately exhumed the according track: youtube.com/watch?v=Lu-JH6gST9

@meduz i am just looking into the reasons for the performance issues. also just learned filter:drop-shadow() also exists.
it seems there’s mainly issues in *animating* the box shadow property, not in having it at all. that said, i haven’t seen the issue in my buttons which animate 12 box shadows. nevertheless i am attempting to painstakingly receeate the button from scratch *again* but trying to avoid animating box-shadows this time.

@zens Yes, having box-shadow or whatever property is fine. But when it comes to animations, you can only count on transform and opacity, and in some situations others can be safe.

Animating filter: drop-shadow isn’t better than animation box-shadow, hence the need for several elements (all having their own background/border/box-shadow) that will have their opacity/transform animated.

viget.com/articles/animation-p

@meduz still, i’d prefer to not have extra elements if possible. and it is! at a performance cost, which doesn’t seem that huge. ofherwise i could always use border-image instead.

@zens Both your buttons and the buttons in this link are both insanely satisfying!!

Sign in to participate in the conversation
Merveilles

Merveilles is a community project aimed at the establishment of new ways of speaking, seeing and organizing information — A culture that seeks augmentation through the arts of engineering and design. A warm welcome to any like-minded people who feel these ideals resonate with them.