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

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.

@conatus they're hella *usable*

@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

@conatus @zens https://youtu.be/1yX9Lpk3pUQ this is the closest to what you described

@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 How did you do it?

@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 Where can I find 98.css?

@alexbuzzbee https://jdan.github.io/98.css/

@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: https://www.youtube.com/watch?v=Lu-JH6gST9s

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

https://www.viget.com/articles/animation-performance-101-browser-under-the-hood/

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

@Alamantus thanks!

@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 https://yip.pe/remote.html to have no javascript except for that. you can see how you go.