5 ms·

Building a Magical 3D Button with Vanilla HTML/CSS

136 points by joshwcomeau 6y ago

maxekman 6y ago
I for sure could not stop clicking! :)
- Udik 6y ago
  So satisfying! :)
deleted 6y ago
[deleted]
deleted 6y ago
[deleted]
jmann99999 6y ago
Scott Forstall, is this really you? :-) [1] [1] https://en.wikipedia.org/wiki/Skeuomorph https://en.wikipedia.org/wiki/Skeuomorph
cosmotic 6y ago
Despite the visual appeal, the jiggle hover and push effect of the button significantly reduces my confidence and satisfaction when pushing the button.
- alexpw 6y ago
  To have confidence, I'd want a locked/disabled state, while whatever action is processing. The jiggle gives me an uneasy/broken feeling, as a button, even though it is very satisfying as a whimsical object. It reminds me of the hockey puck buttons that you record a sound on, and how if you press it too quickly, the sound can't keep up, and it feels janky. Hopefully this isn't too negative, because the tutorial was very readable, informative, and engaging, even for a css novice who had no intention of studying css today.
dsun180 6y ago
You should add "user-select: none;" so it looks better on touch devices without the blue selection box.
- Etheryte 6y ago
  Breaking accessibility for looks is the cardinal sin of web development. The two are not exclusive and often it's actually less work to make things accessible — simply don't break the built in functionality. It's a widespread issue and mostly I'd put the onus on bad education: to this day, many big libraries have very poor accessibility both in their code examples and their components. The true measure of a website's user interface is not whether it's pretty, it's whether it's usable, by everyone.
- cyral 6y ago
  As an alternative, you can make a custom focus style so that it is accessible but also pretty.
stevebmark 6y ago
I really like the look and feel of this button. Flat design is a poison. It's an accessibility nightmare especially for older users. In a flat product, nothing and everything looks like a button, so nothing and everything looks clickable. Humans obviously use 3D spatial visual queues to process the world around us. Taking that away and removing references to real world items was something Jony Ive could have only poisoned the world with after Steve Jobs died. No hero worship for Jobs, but he led the way in understanding beautiful skeuomorphic design. Apple has started introducing drop shadows and gradients and hinting at 3D elements, such as the new Messages icon on MacOS. The pendulum will swing back, not soon enough.
- abraxas 6y ago
  Jony just parroted what Microsoft had been doing a couple years prior. We can once again blame Redmond for awfulness that somehow the rest of the industry found very endearing. I'll never understand why.
  - StavrosK 6y ago
    Why does copying awfulness instead of coming up with it absolve him of blame?
- jmann99999 6y ago
  I would disagree. Flat design is not poison. It is simplicity. Simplicity, done well, leads to a good design. Yes, there have to be visual cues to know that it is a button. There has to be contrast. There should be a hover state that changes the contrast/color when hovering over it. The shape can indicate that it is button. While I love the technical accomplishment of the OP and think it is a great thought experiment, I wouldn't want this arcade-button everywhere. I believe skeuomorphic design, when overused makes a website harder to mentally process. If this were the sole button consistently used on a web app, and the 3D button fit with the website's design, then maybe it would be good. However, I would hate for a generation of HN users to see this post and think they should regress to designs reminiscent of 1998/2007.
  - 6y ago
dmitriid 6y ago
> Why not use box-shadow or border? Those properties are super expensive to animate. The web is the main obstacle to having nice things on the web.
- egypturnash 6y ago
  This is a tradeoff that must be made in every place where technology meets aesthetics, not just the web - I'm an artist who mostly uses Adobe Illustrator, and every new way I think of to use it must be evaluated on the often-orthagonal axes of "how good does it look" and "how much does it slow down AI".
  - dmitriid 6y ago
    > This is a tradeoff that must be made in every place where technology meets aesthetics In the case of HTML+CSS this is the direct result of the underlying tech: almost everything triggers a re-paint or resize+repaint, https://csstriggers.com/ https://csstriggers.com/
mattlondon 6y ago
Didn't work consistently on Firefox on Android. It would miss taps, sometimes it would get stuck "down".
chad-autry 6y ago
Touch screen tap works, but laptop track pad 'tap' does not count as a click on the button.
gherkinnn 6y ago
Gorgeous. The button and the explanation.
superkuh 6y ago
It'd be nice to see an example of the button being a hyperlink to see if I could right click and open in new window or use mouse gestures with it. I tried just putting a <a href=""></a> within the class="FinalButton__Contents-shq40f-3 eFOYWi span and the link was non-functional in all GUI browsers I tried. Why bother not making it from JS when you have to use JS to actually use the button? This button also does not render at all in browsers older than a handful of years. This might be good for a fun, hip project or something commercial where the customer base is small and well characterized. But if it's a site you where expect all kinds of people from all walks of life this isn't going to cover it. The next step should be to implement it in a way that falls back safely so the function is always accessible even if the fancy animation isn't.
- applecrazy 6y ago
  It does work. The following markup rendered a button that as also a standard anchor tag: <a class="pushable" href="//google.com"> <span class="front"> Push me </span> </a>
_carbyau_ 6y ago
I am not a fan over super flatness and hence I appreciate a fake-3D button. But in the same way that many great computer games ALSO don't try for ultra-realism, I don't think it needs to model the real world as much as it does. Things I'd do without: - rising on hover. Colour change is enough acknowledgement. - shadow. Having the two coloured layers is enough. - spring-like overshoot behaviour. Simple down+up is fine. But it is always cool to see a nicely written "I want to achieve this; this is how" article. +1 to author.
chrismorgan 6y ago
> Why not use box-shadow or border? Those properties are super expensive to animate. If we want a buttery-smooth transition on the button, we'll have way more success with this strategy. Border I can understand, because it affects layout (though if you make balanced changes to top/bottom widths, admittedly a bit harder than it may seem at first if you use an easing curve, it would be possible for the engine to recognise it and skip layout, though I have no idea if they do). But box-shadow? Huh? Why would that be expensive to animate (let alone super expensive)? It doesn’t affect layout, it’s just painting. Now admittedly my perspective on this sort of thing has been skewed by using Firefox, where WebRender completely throws out the old performance guidelines (and box-shadow is certainly not expensive to animate, and the multiple-element version will certainly be a negligible smidgeon less efficient), but I thought and would expect that even in the old inferior rendering world that all the other browsers inhabit box-shadow is not expensive to animate provided you’ve used the standard hacks to GPU-accelerate the element’s rendering. Certainly I’ve never observed any smoothness issues on animations of box-shadow. I’m interested in whether I’ve forgotten something here, or whether Josh really is overstepping in his description.
- soylentgraham 6y ago
  Josh the web developer has probably experienced slow down animating shadows, whereas you're just guessing. Maybe give the author the benefit of the doubt, or make an example disproving his theory. There are plenty of css performance gotcha's you wouldnt expect. Changing gradient backgrounds on body (or a big div, I forget) everyframe is fine, but changing it on html (for ios safari's outside-the-body app colours) is horrendously slow and actually causes visible tearing when animating. We could just assume theyre "the same", but with experience, you find they are not.
Waterluvian 6y ago
I like the button except it flickers when I press it and I accidentally selected the buttons text which just completely kills my vibe. Selectable text is one of the best parts of the Web. But a whole lot more UI elements could be made unselectable by default.
dinhvle 6y ago
I don't know why, but it feels a bit uncanny for my eyes, felt off but don't know what it is.
learningwebdev 6y ago
Now that is a beautifully designed website.
stuaxo 6y ago
Your lego guy that pops out asking to share something you've been working on is a bit annoying - I'm already half way through reading one article. OK, I'm not now, I got distracted to come here and comment.
- gxnxcxcx 6y ago
  That evil little fecker just creeped the hell out of me.

136 points by joshwcomeau 6y ago

maxekman 6y ago

I for sure could not stop clicking! :)

Udik 6y ago
So satisfying! :)

deleted 6y ago

[deleted]

deleted 6y ago

[deleted]

jmann99999 6y ago

Scott Forstall, is this really you? :-) [1] [1] https://en.wikipedia.org/wiki/Skeuomorph https://en.wikipedia.org/wiki/Skeuomorph

cosmotic 6y ago

Despite the visual appeal, the jiggle hover and push effect of the button significantly reduces my confidence and satisfaction when pushing the button.

alexpw 6y ago
To have confidence, I'd want a locked/disabled state, while whatever action is processing. The jiggle gives me an uneasy/broken feeling, as a button, even though it is very satisfying as a whimsical object. It reminds me of the hockey puck buttons that you record a sound on, and how if you press it too quickly, the sound can't keep up, and it feels janky. Hopefully this isn't too negative, because the tutorial was very readable, informative, and engaging, even for a css novice who had no intention of studying css today.

dsun180 6y ago

You should add "user-select: none;" so it looks better on touch devices without the blue selection box.

Etheryte 6y ago
Breaking accessibility for looks is the cardinal sin of web development. The two are not exclusive and often it's actually less work to make things accessible — simply don't break the built in functionality. It's a widespread issue and mostly I'd put the onus on bad education: to this day, many big libraries have very poor accessibility both in their code examples and their components. The true measure of a website's user interface is not whether it's pretty, it's whether it's usable, by everyone.
cyral 6y ago
As an alternative, you can make a custom focus style so that it is accessible but also pretty.

stevebmark 6y ago

I really like the look and feel of this button. Flat design is a poison. It's an accessibility nightmare especially for older users. In a flat product, nothing and everything looks like a button, so nothing and everything looks clickable. Humans obviously use 3D spatial visual queues to process the world around us. Taking that away and removing references to real world items was something Jony Ive could have only poisoned the world with after Steve Jobs died. No hero worship for Jobs, but he led the way in understanding beautiful skeuomorphic design. Apple has started introducing drop shadows and gradients and hinting at 3D elements, such as the new Messages icon on MacOS. The pendulum will swing back, not soon enough.

abraxas 6y ago
Jony just parroted what Microsoft had been doing a couple years prior. We can once again blame Redmond for awfulness that somehow the rest of the industry found very endearing. I'll never understand why.
- StavrosK 6y ago
  Why does copying awfulness instead of coming up with it absolve him of blame?
jmann99999 6y ago
I would disagree. Flat design is not poison. It is simplicity. Simplicity, done well, leads to a good design. Yes, there have to be visual cues to know that it is a button. There has to be contrast. There should be a hover state that changes the contrast/color when hovering over it. The shape can indicate that it is button. While I love the technical accomplishment of the OP and think it is a great thought experiment, I wouldn't want this arcade-button everywhere. I believe skeuomorphic design, when overused makes a website harder to mentally process. If this were the sole button consistently used on a web app, and the 3D button fit with the website's design, then maybe it would be good. However, I would hate for a generation of HN users to see this post and think they should regress to designs reminiscent of 1998/2007.
- 6y ago

dmitriid 6y ago

> Why not use box-shadow or border? Those properties are super expensive to animate. The web is the main obstacle to having nice things on the web.

egypturnash 6y ago
This is a tradeoff that must be made in every place where technology meets aesthetics, not just the web - I'm an artist who mostly uses Adobe Illustrator, and every new way I think of to use it must be evaluated on the often-orthagonal axes of "how good does it look" and "how much does it slow down AI".
- dmitriid 6y ago
  > This is a tradeoff that must be made in every place where technology meets aesthetics In the case of HTML+CSS this is the direct result of the underlying tech: almost everything triggers a re-paint or resize+repaint, https://csstriggers.com/ https://csstriggers.com/

mattlondon 6y ago

Didn't work consistently on Firefox on Android. It would miss taps, sometimes it would get stuck "down".

chad-autry 6y ago

Touch screen tap works, but laptop track pad 'tap' does not count as a click on the button.

gherkinnn 6y ago

Gorgeous. The button and the explanation.

superkuh 6y ago

It'd be nice to see an example of the button being a hyperlink to see if I could right click and open in new window or use mouse gestures with it. I tried just putting a <a href=""></a> within the class="FinalButton__Contents-shq40f-3 eFOYWi span and the link was non-functional in all GUI browsers I tried. Why bother not making it from JS when you have to use JS to actually use the button? This button also does not render at all in browsers older than a handful of years. This might be good for a fun, hip project or something commercial where the customer base is small and well characterized. But if it's a site you where expect all kinds of people from all walks of life this isn't going to cover it. The next step should be to implement it in a way that falls back safely so the function is always accessible even if the fancy animation isn't.

applecrazy 6y ago
It does work. The following markup rendered a button that as also a standard anchor tag: <a class="pushable" href="//google.com"> <span class="front"> Push me </span> </a>

_carbyau_ 6y ago

I am not a fan over super flatness and hence I appreciate a fake-3D button. But in the same way that many great computer games ALSO don't try for ultra-realism, I don't think it needs to model the real world as much as it does. Things I'd do without: - rising on hover. Colour change is enough acknowledgement. - shadow. Having the two coloured layers is enough. - spring-like overshoot behaviour. Simple down+up is fine. But it is always cool to see a nicely written "I want to achieve this; this is how" article. +1 to author.

chrismorgan 6y ago

> Why not use box-shadow or border? Those properties are super expensive to animate. If we want a buttery-smooth transition on the button, we'll have way more success with this strategy. Border I can understand, because it affects layout (though if you make balanced changes to top/bottom widths, admittedly a bit harder than it may seem at first if you use an easing curve, it would be possible for the engine to recognise it and skip layout, though I have no idea if they do). But box-shadow? Huh? Why would that be expensive to animate (let alone super expensive)? It doesn’t affect layout, it’s just painting. Now admittedly my perspective on this sort of thing has been skewed by using Firefox, where WebRender completely throws out the old performance guidelines (and box-shadow is certainly not expensive to animate, and the multiple-element version will certainly be a negligible smidgeon less efficient), but I thought and would expect that even in the old inferior rendering world that all the other browsers inhabit box-shadow is not expensive to animate provided you’ve used the standard hacks to GPU-accelerate the element’s rendering. Certainly I’ve never observed any smoothness issues on animations of box-shadow. I’m interested in whether I’ve forgotten something here, or whether Josh really is overstepping in his description.

soylentgraham 6y ago
Josh the web developer has probably experienced slow down animating shadows, whereas you're just guessing. Maybe give the author the benefit of the doubt, or make an example disproving his theory. There are plenty of css performance gotcha's you wouldnt expect. Changing gradient backgrounds on body (or a big div, I forget) everyframe is fine, but changing it on html (for ios safari's outside-the-body app colours) is horrendously slow and actually causes visible tearing when animating. We could just assume theyre "the same", but with experience, you find they are not.

Waterluvian 6y ago

I like the button except it flickers when I press it and I accidentally selected the buttons text which just completely kills my vibe. Selectable text is one of the best parts of the Web. But a whole lot more UI elements could be made unselectable by default.

dinhvle 6y ago

I don't know why, but it feels a bit uncanny for my eyes, felt off but don't know what it is.

learningwebdev 6y ago

Now that is a beautifully designed website.

stuaxo 6y ago

Your lego guy that pops out asking to share something you've been working on is a bit annoying - I'm already half way through reading one article. OK, I'm not now, I got distracted to come here and comment.

gxnxcxcx 6y ago
That evil little fecker just creeped the hell out of me.