Stolen Buttons(anatolyzenkov.com)
anatolyzenkov.com
Stolen Buttons
https://anatolyzenkov.com/stolen-buttons
55 comments
I have noticed on occasion websites with a missing button. Now I know what happened. Finally, closure.
You wouldn’t download a button
Time to sail the high seas.
Sometimes I think it'd be great if that was how the internet actually worked.
Sometimes I think it'd be great if that was how the internet actually worked.
Oh no! Every web button I’ve ever seen, technically I’ve downloaded it!
All is not lost. Congratulations on taking the first step by acknowledgeing your mistake. Surrender and return the buttons and we will wipe your record clean.
It'd be funny if there's a global state shared with everyone who has the button stealer extension installed: so if I stole a button, it'd be missing when you visit the page.
It's called the distributed Web because we share out the buttons equally.
It would leave behind an outline of the button, and if you needed to use it you'd have to put up the strongest button from your stash to try to defeat the stolen button in combat. If you weaken the button enough, you can throw a button capsule at it to capture it.
A variation: you could modify the UI for the next people to deal with. Change font, size, wording, layout.
Does he have all the "No" buttons they seem in short supply?
The legend of the Button-Eater who comes out from his lair somewhere deep inside the Web.
"average person steals 3 buttons a year" factoid actualy just statistical error. average person steals 0 buttons per year. Button-eater Ben, who lives in data server & steals over 10,000 each day, is an outlier adn should not have been counted
Ah, "average", you imprecise term trying to be a proper measure of cenral tendency; give me "mean", "median", or "mode". Lies, damn lies, statistics, and ambiguous terminology.
This kind of vandalism is why we can't have nice things, but at least he didn't change them to rick rolls.
Brad Woods has an amazing website dynamically illustrating the concept of "juice", which he defines as "the non-essential visual, audio and haptic effects that enhance the player's experience".
There's an example of how you can juice up a simple "delete" button with various levels of UX. I encourage you to play around with it to juice up your own buttons!
Source: https://garden.bradwoods.io/notes/design/juice
There's an example of how you can juice up a simple "delete" button with various levels of UX. I encourage you to play around with it to juice up your own buttons!
Source: https://garden.bradwoods.io/notes/design/juice
At times I couldn't tell if this was a lament or an instruction manual.
The "souled" version of the Clif Bar site and the Amazon Video pause menu are good examples of the pendulum perhaps swinging back . Even today they give "overbusy" more than "rewarding."
The "souled" version of the Clif Bar site and the Amazon Video pause menu are good examples of the pendulum perhaps swinging back . Even today they give "overbusy" more than "rewarding."
Yes! Awesome site and post, I'd forgotten about it. Thanks for sharing!
amazing - that’s a great link. loved reading this.
When did we stop making buttons that actually look like a button?
The bas-relief era of UI design now feels like a golden era, and the early "Aqua" versions of Mac OS X the ultimate evolution.
Everything since then feels like we're regressing.
The "add comment" button for this comment is literally a solid blue roundrect. It's not even obvious that it's clickable.
The bas-relief era of UI design now feels like a golden era, and the early "Aqua" versions of Mac OS X the ultimate evolution.
Everything since then feels like we're regressing.
The "add comment" button for this comment is literally a solid blue roundrect. It's not even obvious that it's clickable.
The "when" isn't a mystery or gradual in the slightest—we have concrete dates.
The death of the button occurred on October 21, 2010, when Microsoft released Windows Phone 7 to the international market, beginning the Metro UI era.
Apple wouldn't catch up until September 17, 2014, when they unveiled iOS 7, ditching Steve Jobs's beloved skeuomorphism in favor of Jony Ive's signature flat style.
Google followed up on November 12, 2014, with Android 5.0 Lollipop's introduction of Material Design—arguably the least flat of the three, though it wouldn't stay that way forever.
The death of the button occurred on October 21, 2010, when Microsoft released Windows Phone 7 to the international market, beginning the Metro UI era.
Apple wouldn't catch up until September 17, 2014, when they unveiled iOS 7, ditching Steve Jobs's beloved skeuomorphism in favor of Jony Ive's signature flat style.
Google followed up on November 12, 2014, with Android 5.0 Lollipop's introduction of Material Design—arguably the least flat of the three, though it wouldn't stay that way forever.
Windows Phone 8 was pretty much only buttons in a grid, or lists of relevant information (with support for clearly marked hyperlinks). It was glorious.
They got rid of the button shadows, had them cycle through previews sometimes, and called them 'tiles', but they acted as buttons.
They got rid of the button shadows, had them cycle through previews sometimes, and called them 'tiles', but they acted as buttons.
I agree! I remember that we used to joke that at last we didn't need designers to do designs anymore. Colored rectangles were enough for everything!
Which I think was the reason that Microsoft did it that way and Apple tried to resist a bit. But the developer push was substantial.
Which I think was the reason that Microsoft did it that way and Apple tried to resist a bit. But the developer push was substantial.
ios7 started a bunch of other nonsense, like hidden buttons, and un-link-like-links
And producing them was very easy even in the pre-CSS days.
At the very worst (which is what I did), make up a simple image in Adobe with a 3D effect, save it as a black-and-white bitmap, change the white to the color of the button. The make a second version in the same manner, but this time the shading of the button reversed.
Nexty setup the HTML so the on-press for the link pulled up the alternate button image. The reversed shading (when done properly) then looked like it was depressed.
Is that so much harder than adding the JavaScript and other code around it to make the simple animation some sites have? (At least with the on-press option, it didn’t require having JavaScript active just to animate some buttons.)
At the very worst (which is what I did), make up a simple image in Adobe with a 3D effect, save it as a black-and-white bitmap, change the white to the color of the button. The make a second version in the same manner, but this time the shading of the button reversed.
Nexty setup the HTML so the on-press for the link pulled up the alternate button image. The reversed shading (when done properly) then looked like it was depressed.
Is that so much harder than adding the JavaScript and other code around it to make the simple animation some sites have? (At least with the on-press option, it didn’t require having JavaScript active just to animate some buttons.)
I’ve done webdev in 2000s as well, and everything you described is so much more longer and times-taking than what we’re doing now.
I understand that a lot of people hate JS ecosystem and etc., but we’ve moved on from that a while ago.
Although I’m more on infrastructure side of things nowadays, I don’t miss the early days’ of handwritten HTML.
I understand that a lot of people hate JS ecosystem and etc., but we’ve moved on from that a while ago.
Although I’m more on infrastructure side of things nowadays, I don’t miss the early days’ of handwritten HTML.
It's all because of "UX designers" who have to justify their continued existence by constantly finding new things to change (break). If computers several decades ago had more than enough power to render button-looking buttons, there's no other excuse for the sad state of UI today.
If there is a real rejoinder to this, I have yet to encounter it.
This depressing observation is regularly voiced (or thought) every time UX aesthetics come up... and I've yet to see so much as a sniffy defense.
My assumption this is because it's simply true; the only reason for churn is "fashion" requiring orbiting around a small space of viable options, strange-attractor style, and the vested interest an industry has in fueling the very modest pleasure that comes from tiny or bold steps from what is familiar to what is "fresh."
This depressing observation is regularly voiced (or thought) every time UX aesthetics come up... and I've yet to see so much as a sniffy defense.
My assumption this is because it's simply true; the only reason for churn is "fashion" requiring orbiting around a small space of viable options, strange-attractor style, and the vested interest an industry has in fueling the very modest pleasure that comes from tiny or bold steps from what is familiar to what is "fresh."
Then indeed I succeeded in opening it, but when I did so seemed only to be confronted by a greater and more closely locked barrier. For what could be the meaning of the queer clay bas-relief and the disjointed jottings, ramblings, and cuttings which I found? Had my uncle, in his latter years, become credulous of the most superficial impostures? I resolved to search out the eccentric sculptor responsible for this apparent disturbance of an old man’s peace of mind.
The bas-relief was a rough rectangle less than an inch thick and about five by six inches in area; obviously of modern origin. Its designs, however, were far from modern in atmosphere and suggestion; for although the vagaries of cubism and futurism are many and wild, they do not often reproduce that cryptic regularity which lurks in prehistoric writing. And writing of some kind the bulk of these designs seemed certainly to be; though my memory, despite much familiarity with the papers and collections of my uncle, failed in any way to identify this particular species, or even to hint at its remotest affiliations.
Above these apparent hieroglyphics was a figure of evidently pictorial intent, though its impressionistic execution forbade a very clear idea of its nature. It seemed to be a sort of monster, or symbol representing a monster, of a form which only a diseased fancy could conceive.
- The Call of Cthulhu, Ch 1. The Horror in Clay
The bas-relief was a rough rectangle less than an inch thick and about five by six inches in area; obviously of modern origin. Its designs, however, were far from modern in atmosphere and suggestion; for although the vagaries of cubism and futurism are many and wild, they do not often reproduce that cryptic regularity which lurks in prehistoric writing. And writing of some kind the bulk of these designs seemed certainly to be; though my memory, despite much familiarity with the papers and collections of my uncle, failed in any way to identify this particular species, or even to hint at its remotest affiliations.
Above these apparent hieroglyphics was a figure of evidently pictorial intent, though its impressionistic execution forbade a very clear idea of its nature. It seemed to be a sort of monster, or symbol representing a monster, of a form which only a diseased fancy could conceive.
- The Call of Cthulhu, Ch 1. The Horror in Clay
Even better, how about those capacitive buttons that look like computer buttons in the real world, only even less visually distinct, and have absolutely no force feedback, depressing motion, or any other feedback whatsoever that you've pressed an actual button?
In other news, though, I believe the HN button is just an HTML button, with a touch of font styling on it from HN. Linux on a Chrome-descended browser I'm just getting a grey box with a black outline, no 3D styling. It's not styled that way by HN. Everything else in the CSS properties for me is showing as "user agent stylesheet", e.g., the defaults.
In other news, though, I believe the HN button is just an HTML button, with a touch of font styling on it from HN. Linux on a Chrome-descended browser I'm just getting a grey box with a black outline, no 3D styling. It's not styled that way by HN. Everything else in the CSS properties for me is showing as "user agent stylesheet", e.g., the defaults.
It certainly would have been easier to imagine UI design trends going in reverse - toward explicit designs with a standardized interface (menus, etc).
Was it that Apple dude? Ives or whatever? Made a lot of money with his "revolutionary poor design" and we're still paying for it. I could be wrong.
What a button look like to you? Blue roundrect sure says button to me.
Because you never saw a button in your life
That could be a real experience for children in the not too distant future.
We are seeing more and more appliances coming out with less buttons and a mobile app to access advanced features. Also cars (annoyingly) are coming out with more physical controls replaced by touchscreen interfaces. It's not hard to imagine a world without physical buttons becoming a reality.
The days of digital buttons might also be numbered. Apps designed for touched enabled interfaces, particularly on mobiles, support swipes and gestures to perform different actions. There is no obvious indication you can perform an action with a swipe or gesture. Having grown up pre-internet with physical buttons, dials, sliders etc I automatically look for the digital equivalent for interaction, I don't assume I can swipe or gesture to do something. I have to resort to searching for "how do I do x with y" to find out.
Children on the other hand spend a lot of time playing with new things. they are far more likely to discover swipe or gesture through play. As an adult I am much more task oriented, I'm not looking to play I'm looking to get the thing done.
As children grow up in a world without physical buttons, they may not see the relevance of digital equivalents and lean towards swipe, gesture, voice control etc. Digital buttons may disappear.
An example of an similar technological shift happened for many pre-Boomers with the introduction of Video Cassette Recorders (VCRs). My father grew up with analog clocks and watches. Time was told by two or three hands on a clock face. When VCRs became more affordable in the 80s they came with digital clocks. He could read the time off the digital display but couldn't make the leap to setting a recording time by putting it into program mode then using buttons to set a record start time and duration. To him, time was set by moving the clock hands or twisting a watch dial.
The introduction of flat-UI bothered me in it threw away a visual indication that this "thing" is a clickable button. I obviously not fully adapted to swipes and gestures. I feel like a few steps down the path for whatever the future equivalent of "can't program the VCR" is. I hope the advent of LLMs will make it easy enough for application developers to produce multiple UIs for different classes of user button users, swipe users, whatever the next thing is (brain wave control??).
We are seeing more and more appliances coming out with less buttons and a mobile app to access advanced features. Also cars (annoyingly) are coming out with more physical controls replaced by touchscreen interfaces. It's not hard to imagine a world without physical buttons becoming a reality.
The days of digital buttons might also be numbered. Apps designed for touched enabled interfaces, particularly on mobiles, support swipes and gestures to perform different actions. There is no obvious indication you can perform an action with a swipe or gesture. Having grown up pre-internet with physical buttons, dials, sliders etc I automatically look for the digital equivalent for interaction, I don't assume I can swipe or gesture to do something. I have to resort to searching for "how do I do x with y" to find out.
Children on the other hand spend a lot of time playing with new things. they are far more likely to discover swipe or gesture through play. As an adult I am much more task oriented, I'm not looking to play I'm looking to get the thing done.
As children grow up in a world without physical buttons, they may not see the relevance of digital equivalents and lean towards swipe, gesture, voice control etc. Digital buttons may disappear.
An example of an similar technological shift happened for many pre-Boomers with the introduction of Video Cassette Recorders (VCRs). My father grew up with analog clocks and watches. Time was told by two or three hands on a clock face. When VCRs became more affordable in the 80s they came with digital clocks. He could read the time off the digital display but couldn't make the leap to setting a recording time by putting it into program mode then using buttons to set a record start time and duration. To him, time was set by moving the clock hands or twisting a watch dial.
The introduction of flat-UI bothered me in it threw away a visual indication that this "thing" is a clickable button. I obviously not fully adapted to swipes and gestures. I feel like a few steps down the path for whatever the future equivalent of "can't program the VCR" is. I hope the advent of LLMs will make it easy enough for application developers to produce multiple UIs for different classes of user button users, swipe users, whatever the next thing is (brain wave control??).
> We are seeing more and more appliances coming out with less buttons and a mobile app to access advanced features. Also cars (annoyingly) are coming out with more physical controls replaced by touchscreen interfaces. It's not hard to imagine a world without physical buttons becoming a reality.
And thay is a regression and a mistake. Putting touch screens on cars was a big mistake, children will struggle to drive and turn on/off something as we do, you can't have reliable touch during vehicle movement. It's just stupid. I won't be surprised when regulators will requires some, not all, appliances to have hard buttons. Espacially cars. My car touch screen sometimes suffer a 1 second delay between touches, that's just bad product development, no children will adapt to that, only if braindead
And thay is a regression and a mistake. Putting touch screens on cars was a big mistake, children will struggle to drive and turn on/off something as we do, you can't have reliable touch during vehicle movement. It's just stupid. I won't be surprised when regulators will requires some, not all, appliances to have hard buttons. Espacially cars. My car touch screen sometimes suffer a 1 second delay between touches, that's just bad product development, no children will adapt to that, only if braindead
I may have missed one by looking at this huge dump, but NONE of the "buttons" I saw there actually looked/felt like a button. Something I can feel that I press it down and it gives proper visual feedback, like a little 3D effect.
I'm old-school. :)
I'm old-school. :)
You might like this: https://nielssp.dk/guis/buttons
I really enjoyed Motif and the general flat clean look that came with eg TWM and co. I do have a soft spot for the candy Mac styles, and win2k is still my favorite windows release
I have always felt that the button in the last couple version of Windows was a bit off. This page confirms it: Old school buttons used to stay in a "selected" state after being pressed, but that was not implemented in Windows 8's new UI.
Ooh, nice! This very much appeals to the historian and former GUI developer in me.
Update: The Pixel Perfect checkbox makes a noticeable difference in appearance. I presume this is because older systems were developed before the advent of anti-aliasing, and were designed pixel by pixel.
Update: The Pixel Perfect checkbox makes a noticeable difference in appearance. I presume this is because older systems were developed before the advent of anti-aliasing, and were designed pixel by pixel.
Oh wow, that was so cathartic. Thank you for sharing.
A few really nice buttons there, indeed. :)
GUI design, just like music and film, peaked when I was about 15.
So interesting to see the contrast between OSX and Windows in 2001.
No wonder OSX felt like the future.
I miss the future.
No wonder OSX felt like the future.
I miss the future.
For me the 2001 OSX looks wishy washy and does not have a professional look.
Conversely, I want those old candy Aqua buttons back. They were kitschy, but I loved them.
I'd say the same for the scrollbars, but these days I'd settle for reverting to them being visible at all times.
I'd say the same for the scrollbars, but these days I'd settle for reverting to them being visible at all times.
I believe in the KDE / Magic User Interface way, users should decide what they want a button or a checkbox etc. to look like, and then everything should conform to that.
And if you really wanted to, maybe made some concessions, and were clever about it, you could maybe find a way so that users define shapes and functionality and a default light/dark color scheme, but applications could still use the "user style" with their own color scheme, and allow the user to switch between that and the user defined colors.
It would also have the side effect of ejecting the people who just change things to make their mark. There is no more mark to make! Except making the "style configurator" for the user better, collaborating on expanding the protocol shared between it and websites/applications. You can invent a new type of button, put it on the pile, and hope it becomes one of the higher rated ones that gets downloaded and used a lot, on any OS, in any application or website. That will be a lot less interesting for hack frauds, and software interfaces can finally become awesome and then just better from there.
And if you really wanted to, maybe made some concessions, and were clever about it, you could maybe find a way so that users define shapes and functionality and a default light/dark color scheme, but applications could still use the "user style" with their own color scheme, and allow the user to switch between that and the user defined colors.
It would also have the side effect of ejecting the people who just change things to make their mark. There is no more mark to make! Except making the "style configurator" for the user better, collaborating on expanding the protocol shared between it and websites/applications. You can invent a new type of button, put it on the pile, and hope it becomes one of the higher rated ones that gets downloaded and used a lot, on any OS, in any application or website. That will be a lot less interesting for hack frauds, and software interfaces can finally become awesome and then just better from there.
For me, Windows 3.x era buttons are the pinnacle of buttons.
KDE 3.1 *chef's kiss*
I unironically prefer the UI of old Bootstrap:
https://getbootstrap.com/1.0.0/
They may have peaked with 2.0:
https://getbootstrap.com/2.0.2/
https://getbootstrap.com/1.0.0/
They may have peaked with 2.0:
https://getbootstrap.com/2.0.2/
Wow I totally forgot how great 2 was, how did we regressed from that? The buttons are so satisfying
I want to eat those buttons.
I love those versions, they were really innovative at the time.
I see a couple that look like buttons to me, like a yellow Donate button and a green Learn More button.
I agree that most of the other ones don’t look very button like to me either. But even so I would probably understand that most of them were buttons when I saw them in context on a page.
The flat style has been around for a while now, so I’ve gotten used to it even though when I started using computers it was on Windows 95 with the grey rectangular buttons with shaded sides that give them the “3d effect”.
And even flat style buttons often have changes when you hover and click, but it seems that they didn’t copy that part on this button collection page.
I agree that most of the other ones don’t look very button like to me either. But even so I would probably understand that most of them were buttons when I saw them in context on a page.
The flat style has been around for a while now, so I’ve gotten used to it even though when I started using computers it was on Windows 95 with the grey rectangular buttons with shaded sides that give them the “3d effect”.
And even flat style buttons often have changes when you hover and click, but it seems that they didn’t copy that part on this button collection page.
They didn't copy any hold/hover states which is too bad, those are an integral part of a button IMO
Exactly, and more broadly ALL of them are a variation of bgcolor + border-radius + padding + font (type, size). No funky shape, borders, FX, 3D / relief or even shadow, pixels... Every single one is a flat, round borders.
It sounds like you're talking about the "gloss" era with "juicy" buttons, which some people are retroactively referring to as Frutiger Aero. Yes, things definitely look more 3D in that design. It's currently considered out of mainstream fashion, which explains the lack. Will it resurge?
Earlier era for me actually. I'm a 90s person. :)
Also more generally called skeuomorphism https://en.wikipedia.org/wiki/Skeuomorph
Enter "Lickable Pixels" -- the phrase that described the Aqua era.
Introducing Mac OS X's Aqua interface, Steve Jobs said at Macworld in January 2000: "We made the buttons on the screen look so good you'll want to lick them."
https://en.wikipedia.org/wiki/Aqua_(user_interface)
Introducing Mac OS X's Aqua interface, Steve Jobs said at Macworld in January 2000: "We made the buttons on the screen look so good you'll want to lick them."
https://en.wikipedia.org/wiki/Aqua_(user_interface)
Nice! That Windows 95/98 GUI design wasn't the most beautiful ever made, but it was quite usable. You never had trouble telling what was what.
This is a big part of why I am in love in Posthog's design (though personally I have little belief in my own current ability to replicate it)
I suspect the best buttons - like the best music - are those from one's youth
Apple and Jony Ive killed skeuomorph design a long time ago.
Web 2.0 was fun :-)
Too bad they're just static, as the website doesn't copy the hover state or the on-click animations.
I can't be the only one that tried clicking them to see what they did. ("Where does this 'login' button go?")
:hover and :focus
there are others i think
there are others i think
or link to the site they are from. But then are they aren't stolen buttons?
There's a Chrome Extension he made based on this: https://anatolyzenkov.com/stolen-buttons/button-stealer
I used it for a bit until I realized... I probably didn't want a third party reading all my traffic. But I did like having it for a bit.
(It is linked from the page, but given how the whole page is CTAs... it's hard to notice!)
I used it for a bit until I realized... I probably didn't want a third party reading all my traffic. But I did like having it for a bit.
(It is linked from the page, but given how the whole page is CTAs... it's hard to notice!)
Why I third party? Aren’t the stolen buttons stored locally?
They might be today but who's to say it won't start firing off fetch calls later perhaps under a new owner if it gets sold.
Unfortunately the browser extension permissions are not granular enough to warn you when fetch is being used in an extension.
As an example, my password manager extension can read and inject content into any page along with communicating with its server to sync my vault. These are the only permissions Firefox shows me:
Unfortunately the browser extension permissions are not granular enough to warn you when fetch is being used in an extension.
As an example, my password manager extension can read and inject content into any page along with communicating with its server to sync my vault. These are the only permissions Firefox shows me:
* Access your data for all websites
* Get data from the clipboard
* Input data to the clipboard
* Display notifications to you
* Access browser tabs
* Access browser activity during navigation
I think due to the nature of extensions.
Button components across major component galleries:
https://component.gallery/components/button/
https://component.gallery/components/button/
Interesting site. As a non-Web developer, I've vaguely wondered about the various frameworks and where the "look and feel" that I see on different sites' user controls come from. This be will fun to explore.
For inspiration, I prefer this one:
https://uiverse.io/buttons
https://uiverse.io/buttons
Doesn't work for me at all on iOS Safari?
That's the only interesting one. The rest are a snoozefest of corporate mediocrity.
I don’t think it’s for animation, it’s to collect all the different buttons seen in the wild
Oh this reminds me that we used to create buttons for navigation in flash!
Is there something similar, but for menus?
Is it just me or are these almost all terrible?
Almost all of them are animated, move when hovered, move when clicked, or sometimes all three. Just awful. LLMs keep making buttons like this and I keep telling them not to.
Almost all of them are animated, move when hovered, move when clicked, or sometimes all three. Just awful. LLMs keep making buttons like this and I keep telling them not to.
Funny, it reminds me of War Of The Buttons, a famous French movie from 1962, where kids would cut out buttons from their enemies as a war trophy, and stash them.
https://en.wikipedia.org/wiki/War_of_the_Buttons_(1962_film)
The buttons (at 2:25) : https://youtu.be/O5StEEzpT04?t=145
https://en.wikipedia.org/wiki/War_of_the_Buttons_(1962_film)
The buttons (at 2:25) : https://youtu.be/O5StEEzpT04?t=145
That's rude. Give them back
This is good comedy. I'm disappointed (annoyed, even) it's not the top comment.
I can’t look, so many arrows poorly aligned with text - how can these developers live with themselves!
What is one to do? Unicode has dozens of arrows for each direction, but each of them has its height compared to the text rendered differently depending on font or platform
They're usually done with SVGs or CSS pseudoelements (a clip-path polygon or borders and rotation) rather than Unicode arrows
Exactly, text content goes in a <span>, icon is an <svg>, flex align items center on the wrapper gets you close, nudge the icon to perfection with transform: translate
And then the line wraps.
Alright I’ll take the bait, flex shrink none on the svg, white space no wrap on the text
I also collect old Flash buttons from my archived version of flashkit: https://flashkitty.gzalo.com/Interfaces/Buttons/
What a lovely idea.
I hope there will be some kind of online museum of web design trends before the web turns into something else, and maybe paradigms such as "buttons" will stop being as interesting any more.
I guess I should
Maybe something like tvtropes.com, but for web application design, and of course with visual examples.
I hope there will be some kind of online museum of web design trends before the web turns into something else, and maybe paradigms such as "buttons" will stop being as interesting any more.
I guess I should
Jetzt loslegen
Maybe something like tvtropes.com, but for web application design, and of course with visual examples.
Is this as easy as calling getComputedStyle on a target element or is there more to it? I love the idea and I want to experiment with automating similar.
Thanks. Gah I feel blind. I went back and it’s right there at the top
Ha there were a few buttons on the page that might’ve been distracting lol
Yes, but how does it decide if an element is button? Some are links (<a> tags).
Previous design of editing mode was better :-( Current design shows them as a list, which requires you to scroll a lot to go through all the items.
I am so lucky, this guy only stole 2 "Yes" button from my Claude Code terminal. I still have enough "Yes" buttons to complete my grand project.
It would be lovely to see some of those converted into enamelled metal badges.
It would be interesting if it was possible to sort them by similarity, width, height, shape, color, etc.
Im blown away by how ugly they all are. The worse part is that this is what users expect now. If you so much as put an icon on the corner they cant find the button anymore.
Careful you might run afoul of the infinite scrolling laws.
I had my button stolen but it's not in this inventory. The perpetrator is still out there somewhere parading it or selling it on the black market. I'm still losing sleep over it. I lost my job, wife and car. Still praying for justice to be served one day.
I reported it to the FBI but still no response from them. This shit is serious guys and when will it end?
I reported it to the FBI but still no response from them. This shit is serious guys and when will it end?
Interesting choice to hotlink all the images! The side-effect is that some are dead now.
610 buttons are anchor elements, and only 285 are actually real buttons.
I'm sad that buttons are no longer interesting.
10000 buttons and not a single engaging Call To Action
Oh wow! Curious if you have the collection indexed by the year/month you picked it. Would love to see how button designs and types have changed over the years.
You should deduplicate and offer a cluster view with similarity distance
HIs personal website is a treat to look at
Great, how are we supposed to use those websites now? No wonder web is breaking down
You're visiting boring websites. I only saw one barely skeuomorphic button
Is this a new kind of ransomware?
Company> Where has my button gone? Our website it broken
Anatoly Zenkov> Buha ha ha... I got your buttons!
Company> What do you want? Give my button back, pls.
Anatoly Zenkov> I need 1 billion dollars. Muh ha ha. Since you said pls, I'll give 10% friends & family discount.
Company> Where has my button gone? Our website it broken
Anatoly Zenkov> Buha ha ha... I got your buttons!
Company> What do you want? Give my button back, pls.
Anatoly Zenkov> I need 1 billion dollars. Muh ha ha. Since you said pls, I'll give 10% friends & family discount.
this is really great like collecting bottle caps except is buttons
So many different looking buttons. Wish there were more standards.
There are only like three or four that aren't just flat buttons with a different border radius and colour. If this had been done in the mid 2000s it would have hundreds of entirely different looking buttons. Glassy buttons, metal buttons, glowing buttons, pixel art buttons, cartoon buttons, etc.
A better time. Before flat material lameness and Corporate Memphis.
Yeah, let's take the remaining fun out of the web, everything needs to be gray and plain.
It's called design and thank god everything isn't the same.
Gtk has some nice standard looking buttons for you. You know how those look, and I'm pretty sure you don't want that.
Think to when "UI experts" impose edicts from top down, such as "flat design" or "material". Are you really happy about that?
The fact that we're even looking in awe at this list is amazing. If everything were the same, this wouldn't even be interesting.
This is fun and we need more of it in the world.
Gtk has some nice standard looking buttons for you. You know how those look, and I'm pretty sure you don't want that.
Think to when "UI experts" impose edicts from top down, such as "flat design" or "material". Are you really happy about that?
The fact that we're even looking in awe at this list is amazing. If everything were the same, this wouldn't even be interesting.
This is fun and we need more of it in the world.
Lack of consistent system-wide UI and UX was my biggest gripe with GNU/Linux/X11 back in the day (‘90s, pre-Winamp era, other OSes had most apps with uniform look-and-feel) while I still cared about things like that.
It reminds me a bit of the toolbar mania in the nineties :)
REJECT ALL
why stealing :) buttons are either circle, rectangle, or rounded rectangle :)
They used to be beveled or capsule shaped, after they were 2D.
So this is basically the Thanos of web devs
So few of them look clickable.
simply wonderful.
I suppose this is a healthier hobby than stealing hotel towels and ashtrays.
MEMORANDUM FOR THE HEADS OF EXECUTIVE DEPARTMENTS AND AGENCIES
SUBJECT: Adversarial Distillation of Frontier UI Buttons
The United States leads the world in user interface (UI) technologies. That lead reflects decades of foundational design research, bold aesthetic risk-taking, and millions of hours of front-end development. Our button leadership drives click-through rates, strengthens conversion funnels, and advances the frontiers of e-commerce, digital art, and human-computer interaction. The interactive breakthroughs emerging from original designers raise aesthetic standards, expand interactivity, and improve user experiences around the world.
However, we have information indicating that a specific actor, principally based in Hamburg, Germany—operating under the name Anatoly Zenkov—is engaged in a deliberate, industrial-scale campaign to distill frontier UI buttons. Leveraging inspect-element developer tools to bypass basic DOM protections and using extraction techniques to expose proprietary CSS and SVG information, this coordinated campaign systematically extracts hover states and active properties from target websites, exploiting U.S. design expertise and innovation.
Buttons developed from surreptitious, unauthorized distillation campaigns like this do not replicate the full performance of the original. They do, however, enable this actor to release consolidated web galleries that appear to perform comparably on select hover-state benchmarks at a fraction of the design cost. These distillation campaigns also allow the actor to deliberately strip functional JavaScript from the resulting buttons and undo mechanisms that ensure those UI elements actually submit forms, navigate pages, or add items to a shopping cart.
We remain committed to the free and fair development of web technologies across a competitive ecosystem, from leading frontier design systems to highly tuned CSS libraries, and from open-source frameworks to open-component models. UI distillation, when legitimately used via tutorials or CodePens to produce smaller, lighter-weight components from more advanced systems, is a vital part of that ecosystem. Industrial button-theft activities that aim to systematically undermine original designers are not.
There is nothing innovative about systematically extracting and copying the CSS of the design industry, and there is nothing open about supposedly open button galleries that are derived from acts of malicious UI exploitation. As methods to detect and mitigate industrial-scale element extraction grow more sophisticated, individuals in Hamburg who build their portfolios on such fragile foundations should have little confidence in the integrity and reliability of the buttons they produce.
SUBJECT: Adversarial Distillation of Frontier UI Buttons
The United States leads the world in user interface (UI) technologies. That lead reflects decades of foundational design research, bold aesthetic risk-taking, and millions of hours of front-end development. Our button leadership drives click-through rates, strengthens conversion funnels, and advances the frontiers of e-commerce, digital art, and human-computer interaction. The interactive breakthroughs emerging from original designers raise aesthetic standards, expand interactivity, and improve user experiences around the world.
However, we have information indicating that a specific actor, principally based in Hamburg, Germany—operating under the name Anatoly Zenkov—is engaged in a deliberate, industrial-scale campaign to distill frontier UI buttons. Leveraging inspect-element developer tools to bypass basic DOM protections and using extraction techniques to expose proprietary CSS and SVG information, this coordinated campaign systematically extracts hover states and active properties from target websites, exploiting U.S. design expertise and innovation.
Buttons developed from surreptitious, unauthorized distillation campaigns like this do not replicate the full performance of the original. They do, however, enable this actor to release consolidated web galleries that appear to perform comparably on select hover-state benchmarks at a fraction of the design cost. These distillation campaigns also allow the actor to deliberately strip functional JavaScript from the resulting buttons and undo mechanisms that ensure those UI elements actually submit forms, navigate pages, or add items to a shopping cart.
We remain committed to the free and fair development of web technologies across a competitive ecosystem, from leading frontier design systems to highly tuned CSS libraries, and from open-source frameworks to open-component models. UI distillation, when legitimately used via tutorials or CodePens to produce smaller, lighter-weight components from more advanced systems, is a vital part of that ecosystem. Industrial button-theft activities that aim to systematically undermine original designers are not.
There is nothing innovative about systematically extracting and copying the CSS of the design industry, and there is nothing open about supposedly open button galleries that are derived from acts of malicious UI exploitation. As methods to detect and mitigate industrial-scale element extraction grow more sophisticated, individuals in Hamburg who build their portfolios on such fragile foundations should have little confidence in the integrity and reliability of the buttons they produce.
You forgot to somehow blame it on Biden
He's as obsessed with buttons as "Mr. Lossoff" the "Button Man" in "A Nero Wolfe Mystery” episode “The Mother Hunt”, where Archie drops in on "Mister Lossoff’s Distinguished Buttons” in the garment district of New York:
https://www.youtube.com/watch?v=h-QgWOSVKm4&t=724s
https://www.youtube.com/watch?v=h-QgWOSVKm4&t=724s
This is like the late 80s/early 90s cyberspace idea... Imagine you're walking through a 3D ramp and all these buttons are yelling at you from all over the atmosphere... Login here! Start here! Contact us...
Can anyone comment on the legality of this? By the number I see, this would no longer be classified as simple possession, but likely as intent to distribute.
Yoink
Very nice.
Now let’s see Paul Allen’s buttons
Now let’s see Paul Allen’s buttons
Haha, there was a post about 98.css the other day, I'm pretty sure it's one of those.
none of them work
That’s very autistic German of him to do that