Top
Best
New

Posted by Gecko4072 5 days ago

Stolen Buttons(anatolyzenkov.com)
158 points | 41 comments
JSR_FDED 8 minutes ago|
Surprising how not one of these made my heart beat faster.
input_sh 1 hour ago||
Too bad they're just static, as the website doesn't copy the hover state or the on-click animations.
dorianmariecom 1 hour ago|
:hover and :focus

there are others i think

binaryturtle 1 hour ago||
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. :)

nielssp 57 minutes ago||
You might like this: https://nielssp.dk/guis/buttons
Kuyawa 21 seconds ago|||
Ubuntu 2020 wins, only one dark themed
binaryturtle 21 minutes ago||||
A few really nice buttons there, indeed. :)
reaperducer 15 minutes ago|||
So interesting to see the contrast between OSX and Windows in 2001.

No wonder OSX felt like the future.

I miss the future.

QuantumNomad_ 1 hour ago|||
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.

harpiaharpyja 1 hour ago||
They didn't copy any hold/hover states which is too bad, those are an integral part of a button IMO
madibo3156 56 minutes ago||
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?
binaryturtle 18 minutes ago||
Earlier era for me actually. I'm a 90s person. :)
amelius 1 hour ago||
For inspiration, I prefer this one:

https://uiverse.io/buttons

Gualdrapo 1 hour ago||
https://uiverse.io/GreyD097/great-rat-93

wow

reaperducer 5 minutes ago||
That's the only interesting one. The rest are a snoozefest of corporate mediocrity.
anon7000 1 hour ago|||
I don’t think it’s for animation, it’s to collect all the different buttons seen in the wild
jstanley 1 hour ago||
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.

ninjahawk1 1 minute ago||
Very nice.

Now let’s see Paul Allen’s buttons

thih9 44 minutes ago||
I wish there was a way to exclude the plain ones (single color rectangle with rounded corners and text).
finger 1 hour ago||
It would be interesting if it was possible to sort them by similarity, width, height, shape, color, etc.
iefbr14 41 minutes ago||
It reminds me a bit of the toolbar mania in the nineties :)
Retr0id 1 hour ago||
Interesting choice to hotlink all the images! The side-effect is that some are dead now.
wuhhh 2 hours ago|
I can’t look, so many arrows poorly aligned with text - how can these developers live with themselves!
Aardwolf 2 hours ago|
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
matteason 2 hours ago||
They're usually done with SVGs or CSS pseudoelements (a clip-path polygon or borders and rotation) rather than Unicode arrows
wuhhh 1 hour ago||
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
reaperducer 4 minutes ago||
And then the line wraps.
More comments...