Steal These Buttons

May 21, 2003 1:57 PM

So I guess it started when Jeremy Hedley made these buttons, dissatisfied as he was with the W3 Validator's default icons. Or was it Winer's white-on-orange button that did it, and the ensuing variations that appeared? In any case, we now have pixely buttons for just about everything, scripts to make even more, and GUI frontends to those scripts for fun and ease. And if you want to be kind to their servers; here's the source if you have Image::GD.
posted by brownpau (33 comments total)

i warn you, click not on that "GUI frontend" link.

i already wasted a good amount of my morning making beautifully stupid buttons there.
posted by fishfucker at 2:07 PM on May 21, 2003

We used to do this with everything in the mid- to late-90s, with the standard shade of gray and dimensions used from the "Netscape Now!" buttons. That got unpopular around '99, IIRC, and I've hardly seen one since.
posted by waldo at 2:14 PM on May 21, 2003

Wow. I made a few of the buttons painstakingly by hand with MSPaint. Now it automated?

What's next Microsoft Buttons 2003?
posted by Argyle at 2:18 PM on May 21, 2003

Wow. I made a few of the buttons painstakingly by hand with MSPaint. Now it automated?

I didn't realize MSPaint saved in an HTML format.
posted by eyeballkid at 2:27 PM on May 21, 2003

Argyle, I remember making buttons and graphics in Windows 3.1 Paintbrush (or whatever it was called), then opening them in VuePrint to convert the buttons to a suitable format for the web. So I was a in awe when I played around with that GUI setup. I'm mow wondering how I did things before I had Photoshop.
posted by mkelley at 2:28 PM on May 21, 2003

ooh. my bad. please continue. it looke initially like the buttons were formatted using css.
posted by eyeballkid at 2:29 PM on May 21, 2003

Very nice.
posted by riffola at 2:31 PM on May 21, 2003

Thank god for Silkscreen.
posted by jpoulos at 2:32 PM on May 21, 2003

YES, thank god for silkscreen, and all the teenage webmasters that use it in it's TINIEST farking size...
posted by shadow45 at 4:21 PM on May 21, 2003

Well, what do you think?


or

posted by Argyle at 4:36 PM on May 21, 2003

I suspect Silkscreen won't be so popular once middle-aged bloggers become elderly bloggers. Not too readable.

Try relative font sizes so everyone can read your text. Especially if it's more important than these buttons.
posted by gramcracker at 4:43 PM on May 21, 2003

Like eyeballkid suggested, I've been using inline css to make the occasional button more or less like the ones discussed here.

An example :

[span style="font-family: verdana, sans-serif;
font-size: 10px;
font-weight:bold;
text-decoration:none;
color: white;
background-color: #000099;
border-left:1px solid #0066cc;
border-top:1px solid #0066cc;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
padding:0px 3px 0px 3px;
margin:0px;"]
Blah!
[/span]

Share and enjoy.
posted by stavrosthewonderchicken at 4:50 PM on May 21, 2003

Stavros, that is kickass. I owe you a Shiner at the next SXSW...
posted by Argyle at 5:02 PM on May 21, 2003

i am a convict convert (like many here), using css buttons in place of nice pixely images,,,, but brownpau's link still gets me all giggly and horny deep down inside.

*sigh* i will never forget you k10k :)
posted by poopy at 5:43 PM on May 21, 2003

As an addendum to stav's css tip, if you're totally married to the antipixel style, try this:

[span style="font-family: verdana, sans-serif;
font-size: .55em;
font-weight:bold;
text-decoration:none;
color: white;
border:1px solid #FFFFFF;
margin:0px;
width: 20px;"]
[span style="background-color: #FF6600;padding:2px 5px 2px 5px;border-right:1px solid #FFFFFF;"]CSS[/span][span style="background-color: #888877;padding:2px 5px 2px 5px;"]ONLY[/span]
[/span]
posted by jpoulos at 6:16 PM on May 21, 2003

you're claiming that Winer invented the button too?

Winer works in mysterious ways.
posted by lowlife at 6:42 PM on May 21, 2003

My favorite button:


posted by davidmsc at 7:21 PM on May 21, 2003

Darnit.
posted by davidmsc at 7:22 PM on May 21, 2003

something tells me this post is already in metatalk.
posted by specialk420 at 8:27 PM on May 21, 2003

Why? This is a great post.
posted by timeistight at 8:36 PM on May 21, 2003

Apologies to mr_crash_davis and Argyle... but I still like mine better. ^^
posted by brownpau at 9:09 PM on May 21, 2003

And for those of you lucky enough to be using The Gimp merely click Xtns->Script-Fu->Buttons and voila, automated button goodness.
posted by PenDevil at 1:30 AM on May 22, 2003

I suspect Silkscreen won't be so popular once middle-aged bloggers become elderly bloggers. Not too readable.

Middle-aged or elderly hell. I'm 28, after too many years of computer use, I wear glasses 24/7. If I go to a site and can't size the text, I'm out of there.

Entirely too many people use the tiniest fonts available. If I'm squinting with my glasses on, how the hell do they expect anyone to enjoy it?

In a few years, we'll all be walking around with thick glasses, wrist braces and a hump if this continues.
posted by SuzySmith at 1:31 AM on May 22, 2003

29. Already got the thick glasses down...
posted by GrahamVM at 1:49 AM on May 22, 2003

Oh, and the "Section 508" Silkscreen one is somewhat ironic, don'tcha think?
posted by GrahamVM at 1:54 AM on May 22, 2003

thick glasses, wrist braces and a hump if this continues

*sigh*

If I'd got the hump I mightn't need the wrist brace or the thick glasses.



Sorry. That was crude.
posted by Grangousier at 2:36 AM on May 22, 2003

GD kicks ass.
posted by y6y6y6 at 5:33 AM on May 22, 2003

While I agree completely that body type on most "hip" websites is too small, I don't think that complaint has relevance in this context. Eight point Silkscreen is a good choice for these badges, which are really meant to be recognized rather than read. Kottke designed Silkscreen to be used "in places where extremely small graphical display type is needed":

"The primary use is for navigational items (nav bars, menus, etc.)."
 
"In order to preserve the proper spacing and letterforms, Silkscreen should be used at 8pt. multiples (8pt., 16pt., 24pt., etc.) with anti-aliasing turned off."

posted by timeistight at 7:23 AM on May 22, 2003

There's a great story about some of these icons, and it starts with my daughter running up the stairs at 7 AM on a Sunday morning yelling "Dad, there's a crazy man on the phone."

...
posted by jeffbarr at 11:30 AM on May 22, 2003

metafilter?:
posted by Hackworth at 3:42 PM on May 22, 2003

Heh. Room for one more? I ended up making a MeFi button earlier today, to link to MeFi user profiles over at the [WARNING SELF-LINK HIDE THE CHILDREN] Seattle weblog portal:



I really like these cute little buttons, but I'm sure in just a couple years we'll shake our heads sadly at any site that still has them, saying, "That's so 2003."
posted by webmutant at 8:28 PM on May 22, 2003

This is the greatest thing I have ever seen. Thanks, brownpau.
posted by Tlogmer at 9:32 PM on May 22, 2003

awww, don't say that Hackworth. *sniff*
posted by shadow45 at 3:28 PM on May 23, 2003