Follow

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.

you can try them out / swipe the code for your own evil purposes here:

yip.pe/remote.html

what os wuite surprising is how the yellow and magenta can look so good in the animations. i would mever pick those if i weren’t copying

the font i used was ChiKarego2 which isn’t quite right.
here’s a list of possible alternatives that more closely resemble the style
2. SkyWing Bold
3. Helion
4. Chennai Black this one looks nice
5. Arista 2.0
6. Cogumelo Heavy
7. .Nround XB Bold
8. Orev Edge Extra Bold
9. Orev Edge Black
10. Alaqua
11. Como extra bold
12. Viga
13. Varela Round
14. GeometrySoftPro-BoldN (free)
14. Quan Rounded Black
15. Abandoned Ultra (free)
16. Isbit Pro Bold
17. Dunno Regular free

“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.

@zens my dream is for haptic feeback for touch screens to take of so you can feel the 3d shape of the buttons on your phone

@nawordar @zens thats rad, i love the era of phone design where companies were trying all kinds of wild stuff

@conatus @zens yep, I was fascinated with mobile phones in primary school. I would like to start collecting the craziest mobiles somewhere in the future

@zens Wow, I didn’t think it would look this nice. This is inspiring.

@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!!

@zens These buttons are great! Only one thing: I need to switch on JS to enjoy. At least on my phone. Will try it later on laptop.

@hansup that’d be because mobile phones don’t use the “active” state of buttons for some reason, so i use javascript to force it.

@hansup and by “force” it, i just mean “preventDefault” , mobile browsers are weird about buttons.

@hansup similarly for the focus state, just doesn’t display

@zens Oh, I see. It’s a pity that our touch devices aren’t capable of handling buttons without help of JS.
Anyways, thanks for reminding and bringing back 3D design, especially for buttons.

@hansup maybe there’s a way, i just haven’t found it. i’ll look at what 98.css does. it seems to have active state and i don’t think it uses js, so maybe i just missed a step.

@hansup ah, 98.css has an empty “ontouchstart” on the body element.

i’ve changed yip.pe/remote.html to have no javascript except for that. you can see how you go.

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.