Comments on: Steal These Buttons

Steal These Buttons

brownpau — Wed, 21 May 2003 13:57:15 -0800

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.

By: fishfucker

fishfucker — Wed, 21 May 2003 14:07:10 -0800

i warn you, click not on that "GUI frontend" link. i already wasted a good amount of my morning making beautifully stupid buttons there.

By: waldo

waldo — Wed, 21 May 2003 14:14:32 -0800

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.

By: Argyle

Argyle — Wed, 21 May 2003 14:18:23 -0800

Wow. I made a few of the buttons painstakingly by hand with MSPaint. Now it automated? What's next Microsoft Buttons 2003?

By: eyeballkid

eyeballkid — Wed, 21 May 2003 14:27:31 -0800

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.

By: mkelley

mkelley — Wed, 21 May 2003 14:28:16 -0800

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.

By: eyeballkid

eyeballkid — Wed, 21 May 2003 14:29:17 -0800

ooh. my bad. please continue. it looke initially like the buttons were formatted using css.

By: riffola

riffola — Wed, 21 May 2003 14:31:14 -0800

Very nice.

By: jpoulos

jpoulos — Wed, 21 May 2003 14:32:56 -0800

Thank god for Silkscreen.

By: shadow45

shadow45 — Wed, 21 May 2003 16:21:26 -0800

YES, thank god for silkscreen, and all the teenage webmasters that use it in it's TINIEST farking size...

By: Argyle

Argyle — Wed, 21 May 2003 16:36:00 -0800

Well, what do you think? or

By: gramcracker

gramcracker — Wed, 21 May 2003 16:43:28 -0800

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.

By: stavrosthewonderchicken

stavrosthewonderchicken — Wed, 21 May 2003 16:50:35 -0800

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.

By: ed

ed — Wed, 21 May 2003 16:56:31 -0800

Wait a minute. In addition to XML, RSS, the weblog, Amazon.com, the picture phone, and the Earth (exactly 12 minutes before that fictional Christian deity), you're claiming that Winer invented the button too?

By: Argyle

Argyle — Wed, 21 May 2003 17:02:20 -0800

Stavros, that is kickass. I owe you a Shiner at the next SXSW...

By: poopy

poopy — Wed, 21 May 2003 17:43:07 -0800

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 :)

By: jpoulos

jpoulos — Wed, 21 May 2003 18:16:04 -0800

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]

By: lowlife

lowlife — Wed, 21 May 2003 18:42:50 -0800

you're claiming that Winer invented the button too?

Winer works in mysterious ways.

By: davidmsc

davidmsc — Wed, 21 May 2003 19:21:53 -0800

My favorite button:

By: davidmsc

davidmsc — Wed, 21 May 2003 19:22:27 -0800

Darnit.

By: specialk420

specialk420 — Wed, 21 May 2003 20:27:33 -0800

something tells me this post is already in metatalk.

By: timeistight

timeistight — Wed, 21 May 2003 20:36:03 -0800

Why? This is a great post.

By: brownpau

brownpau — Wed, 21 May 2003 21:09:49 -0800

Apologies to mr_crash_davis and Argyle... but I still like mine better. ^^

By: PenDevil

PenDevil — Thu, 22 May 2003 01:30:19 -0800

And for those of you lucky enough to be using The Gimp merely click Xtns->Script-Fu->Buttons and voila, automated button goodness.

By: SuzySmith

SuzySmith — Thu, 22 May 2003 01:31:00 -0800

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.

By: GrahamVM

GrahamVM — Thu, 22 May 2003 01:49:46 -0800

29. Already got the thick glasses down...

By: GrahamVM

GrahamVM — Thu, 22 May 2003 01:54:15 -0800

Oh, and the "Section 508" Silkscreen one is somewhat ironic, don'tcha think?

By: Grangousier

Grangousier — Thu, 22 May 2003 02:36:09 -0800

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.

By: y6y6y6

y6y6y6 — Thu, 22 May 2003 05:33:21 -0800

GD kicks ass.

By: timeistight

timeistight — Thu, 22 May 2003 07:23:28 -0800

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

By: jeffbarr

jeffbarr — Thu, 22 May 2003 11:30:43 -0800

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

By: Hackworth

Hackworth — Thu, 22 May 2003 15:42:37 -0800

metafilter?:

By: webmutant

webmutant — Thu, 22 May 2003 20:28:34 -0800

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

By: Tlogmer

Tlogmer — Thu, 22 May 2003 21:32:54 -0800

This is the greatest thing I have ever seen. Thanks, brownpau.

By: shadow45

shadow45 — Fri, 23 May 2003 15:28:30 -0800

awww, don't say that Hackworth. *sniff*