Steal These Buttons
Comments: 77
Not being very clever or technically inclined, I’m disappointed that I can’t bestow some brilliant gift on the web sites of the world like proper quotes or an RSS validator or a whole stable of brilliant plug-ins. Setting my sights considerably lower, however, I realise there’s perhaps one small thing…
I’ve never liked the orange XML button that’s everywhere these days, so when I started Antipixel I made my own. (Not a nice font, it’s poorly set, and at 430-odd bytes, it’s larger than it needs to be – nothing personal against whoever designed it, I’m just fussy this way.) The W3C’s validation buttons suck big eggs, so I made my own versions of those as well. I’ve received a bunch of positive feedback about the Antipixel buttons, so I’m giving them away.
If you want them, they’re yours, gratis, no strings attached.
Pull them straight off the main page here if you want, and if you’d like to change anything about them, go ahead and do that. I’m posting the Photoshop files below so you can download those and change anything you want. You do not need to give me credit or provide a link back here or anything like that. (Some people are already using them and at least one kind soul has posted such a link back here. You don’t need to do that anymore, but thank you for being a more than decent person.)
So, bye-bye little buttons. Go forth, multiply and, above all, have fun out there.
W3C buttons (10K gzipped Photoshop 7 file)
XML buttons (with labels) (10K gzipped Photoshop 7 file)
Simple XML & RSS (9K gzipped Photoshop 7 file)
The font used in the buttons is Jason Kottke’s wonderful Silkscreen.
Update: Folks, this post is becoming a bit of a spam magnet, so I’m closing off the comments. You’re still perfectly welcome to the buttons, of course, and I’m very grateful for all the positive comments and that they’ve been so widely adopted. Just a bit tired of having to delete ads for things in which only the very desperate would have an interest. [-jh 2003.01.03]
•••
Posted to Computers • 2002.10.22 (Tue) • 23:36
Comments
Posted by slava 2002.10.23, 01:10
http://www.unsanity.org now uses your buttons — way to go! =) Thanks!
Posted by Ryan Carter 2002.10.23, 04:35
Excellent!
I’ve admired your buttons for a while now, but didn’t want to ‘steal’ ‘em. I will definitely be using these on my site in the future. Thanks Jeremy!
Posted by justin klubnik 2002.10.23, 05:35
very, very nice. small, simple, pleasing to the eye.
Posted by teradome 2002.10.23, 06:09
ditto on justin. i preferred validator links as text before, but i liked these so much i went and made them graphics. i’ve made some wcag and section 508 buttons off these as well, for those too lazy to make their own. <g>
Posted by teradome 2002.10.23, 06:13
ditto on justin. i preferred validator links as text before, but i liked these so much i went and made them graphics. i’ve made some wcag and section 508 buttons off these as well, for those too lazy to make their own. <g>
Posted by Chris 2002.10.23, 07:53
Oh sure. Wait until AFTER I ask for permisison and put my sight!
Thanks again. :-P
Posted by Mike 2002.10.23, 08:39
Sweet. Thanks Man.
Posted by Shawn 2002.10.23, 11:34
Very elegant design, Jeremy. Thanks for contributing. Also, you might be interested in Mark Pilgrim’s request for logos at http://diveintomark.org/archives/2002/10/22.html#rss_validator. An RSS button in the style you’ve established would be great.
Posted by Shawn 2002.10.23, 11:40
I should clarify. I know you already have an RSS button. The above would be for an valid RSS button.
Posted by Stephan 2002.10.23, 20:02
The weblog software SnipSnap http://www.snipsnap.org will ship with your buttons in the default theme
thanks
Posted by Jamie Zawinski 2002.10.24, 06:24
GIFs are so 1998! You don’t need to use an image for the RSS logo at all: I hacked one up using style sheets on dnalounge.com (bottom left corner.) It goes like this:
<STYLE TYPE="text/css">
<!–
.xmlbutton {
color: FFFFFF;
background-color: FF6600;
border-color: FF6600;
border-style: outset;
text-decoration: none !important;
margin: 2em 0em 0em 0em;
padding: 0em 0.5em 0em 0.5em;
border-width: 2;
}
.xmlbutton:hover {
background-color: FF9900;
}
.xmlbutton:active {
border-style: inset !important;
}
–>
</STYLE>
<A HREF="xml/" CLASS="xmlbutton">
<FONT SIZE="-2"><B>XML</B></FONT></A>It will load faster, since that’s less bytes than the GIF, and it’s embedded in the document; it keeps text, text; and it still works sensibly on non-stylesheet browsers (the “XML” text shows up as a normal HREF in that case.)
Posted by Jeff Hume 2002.10.24, 06:38
Great! Uploading to my blog as I type! (http://jeff.hume.ca)
Posted by Mike 2002.10.24, 07:39
Hey cool Jeremy, I think I’m going to put them on webspiffy.com on the next update. I love Silkscreen too. It’s such a useful font.
Posted by Pascale Soleil 2002.10.25, 05:46
Apparently Dave Winer is going off on you and others for your efforts to beautify Userland’s butt-ugly button.
I have a written a rant explaining why I think he needs to grow a clue.
Posted by teradome 2002.10.25, 23:38
Who knows… [coder in-joke] maybe he likes blue hyperlinks and gray backgrounds, too? [/coder in-joke]
Posted by jh 2002.10.26, 00:10
Pascale — You’ve got bigger balls than me, mate! ;-)
Really though, about the orange… it’s not my favourite colour, either. But I wrote a response to Dave (and anyone else who’s worried about dilution) explaining my thinking behind the whole thing and why it still has to be orange. I hope it helps you to see the orange in a slightly different light.
Teradome — you’re naughty!
Posted by PeterV 2002.10.26, 00:12
Dave Winer is right. What if people started to redesign traffic signs?
Posted by PeterV 2002.10.26, 00:18
I just read your explanation - I can see your point somewhat. I still think Dave’s right though - but that’s probably because I value logic and ease of use over visual looks (it’s just my angle).
Posted by jh 2002.10.26, 00:55
PeterV — Thanks for following up here. I hope my explanation made sense (it was written after spending the day at the immigration office trying to renew my visa, never an aid to clarity, followed by a 3km swim, which is an even worse aid to clarity ;-).
I’m a graphic designer/art director (you may never know this from looking at the site, but I am. Really!) and designers who have worked me with quickly get used to having to provide damned solid reasons for every single choice they make in a design. Sometimes “because it just looks good” will fly, but I try to shoot for more than that.
I learned a couple of things a long time ago that I see designers struggling with all the time.
The first is that the job of a designer is to solve problems, generally communication problems (How do we convey this idea, this concept, this product given these constraints? How can we can do it economically and with panache?).
The second thing is that my ego has absolutely no role to play in my work whatsoever. The client’s ego is another matter altogether, but let’s not go there. I’m a graphic designer, not an artist and I don’t pretend otherwise. I love the work, but I get my kicks elsewhere.
I’m trying to say that I look at the problems of design rationally and dispassionately (while, paradoxically perhaps, aiming for an emotional response). At least, I try to look at them this way.
As for logic and ease of use, I really can’t see how either of these have been compromised in this case.
Posted by John Munsch 2002.10.31, 04:06
I love the buttons and I’m going to use one myself (I had been going to use the usual orange XML but was appalled by the association of all of XML with something that was just a specific format).
The thing I object to is the ampheta button. I’d hate to think that RSS would get associated with AmphetaDesk, Radio, or even my own HotSheet. RSS is far bigger than any one program that people use to fetch it.
Posted by John Munsch 2002.10.31, 04:08
I love the buttons and I’m going to use one myself (I had been going to use the usual orange XML but was appalled by the association of all of XML with something that was just a specific format).
The thing I object to is the ampheta button. I’d hate to think that RSS would get associated with AmphetaDesk, Radio, or even my own HotSheet. RSS is far bigger than any one program that people use to fetch it.
Posted by lon 2002.11.15, 15:20
Thanks for the buttons and also for the font link so I could make a matching one for accessibility compliance…
Posted by Ryan 2002.11.22, 01:35
I’ve just slapped a couple of the buttons — slightly modified — onto my site. Thanks again!
Posted by john marshall 2003.01.15, 14:52
Many thanks for the buttons/images. I now use them as an alternative large ugly W3C ones. I just wish I could make up my mind what the rest of my site should look like. Very impressed with your site design. Thank you.
Posted by victor 2003.01.15, 17:42
I finally went and stole them. I hope you don’t mind me changing the color scheme (even if this dilutes its value ;)
Posted by Lyle Barnes 2003.02.05, 23:08
I stole these botton for like you said.
Posted by Lbarnes 2003.02.05, 23:15
I stole and use the buttons now thank you 02/05/03
Posted by jake 2003.02.12, 06:49
Ummm… so I basically did what Jamie did up there. Only I stripped out the legacy junk a while ago, and started playing with the idea of having an extension on the XML text. ie “XML | Full Posts” I never figured out why the guy who made that code to begin with made it looks so ugly. Really defeated the point. ;)
I also used Verdana instead of the nice Silkscreen font simply because Verdana is on more machines out there.
I’m wary of linking to an html page that could dissapear in the future, but lets hope it doesn’t… :) XML button test page
Posted by Will 2003.03.21, 02:42
Your buttons are just so darn good looking, I added them even though I’ve prided myself on a “text only” site. Best use yet of the Silkscreen font too.
Posted by Brian 2003.03.25, 22:07
Thanks for your hard sacrifice.. just kidding. Actually I love your buttons, and will be adding them to reelgeeks. They have flavor… and style.
Posted by Stew 2003.03.29, 06:38
I like ‘em.
Here’s mine:
http://www.stewshack.com/icons/css2valid.gif http://www.stewshack.com/icons/xhtml11valid.gif http://www.stewshack.com/icons/bobby.gif
Feel free to steal those too.
Posted by George Girton 2003.03.29, 08:32
Here is my XML orange-button offering, which you can pick up on www.thedailychannel.com The reason I like it, is you don’t have to open up an HTTP request to get a gif image across, you can embed it right there as a style in your page.
cheers!
George Girton, www.thedailychannel.com
p.x a { margin-top:.1em; margin-bottom:.1em; margin-left:25px; padding:1px 1px 1px 1px; border-top:1px solid #ffc8a4;border-right:1px solid #7d3302;border-bottom:1px solid #3f1a01; border-left:2px solid #ff9a57; background-color:#FF6600;text-align:left; text-decoration:none; color:white;font-weight:bold;font-size:12px; }
Posted by Sean 2003.03.29, 09:02
Wow. Thanks, I have seen these elsewhere and will definitely use them! You are a star!
Cheers mush!
Posted by warren 2003.03.30, 07:31
nice button, but aren’t you supposed to only put them on valid pages…
i clicked on your valid xhtml button on this page… and much to my dismay, it failed…
what’s the deal w/ that?
Posted by dave 2003.03.30, 09:33
answer (partial) for warren:
It appears the invalid code is in the comments, so whoever coded the comments section is to blame for allowing it to generate non-valid markup.
So possibly not the author’s fault.
Posted by Marc Garrett 2003.03.30, 13:21
Thanks for the great images; I’m using the XHTML button on since1968.com.
Posted by jh 2003.03.30, 16:11
Warren —- Dave’s right: it’s possible to leave a comment that contains ‘invalid’ markup, thus causing the page as a whole to fail the test. You would have noticed that this page fails because of such a comment, not because of the original post or the layout code.
I’m not too worried about comments. I certainly don’t want to make anyone have to jump through hoops in order to post here (like checking to make sure markup is valid or ‘preflighting’ comments through some sort of checking routine), nor do I want to have to run around fixing ‘broken’ comments. It’s not that big a deal. I’d say more than 90% of readers don’t care one way or another whether things are valid or not, just as long as things look reasonable on screen.
I put the buttons on the pages mostly for myself —- as a housekeeping measure to let me see if I’ve screwed up anywhere when making or updating posts. I happen to care if my code’s not valid, but I don’t expect anyone else to care if theirs is (although I very much appreciate it if people make the effort). I hope it’s one instance of that old programmers’ saying “Be strict with what you produce and liberal with what you accept.”
That’s why I don’t use the W3C’s official graphics (apart from the fact that they’re ugly): they’re presented to people for use after a page has been validated and, as I mentioned, I’m not always sure mine will.
The buttons as I’m using them represent a goal, not a promise.
Posted by Tirth Raj Sah 2003.04.01, 00:17
very nice buttons.
Thanks
Posted by Marek 2003.04.01, 09:55
Nice buttons. And what about W3C icons without images at all, made with pure HTML and CSS only?
Posted by pixy 2003.04.02, 08:33
I guess you can go to smaller and smaller ones:
Posted by elektronaut 2003.04.03, 19:45
sweet. :) i based my buttons on yours, with my own font
Posted by Anonymous 2003.04.06, 09:09
ive done 2
Posted by Stephen Mitchell 2003.04.09, 00:55
Thanks man these buttons kick arse, more please!!!
Posted by matthew 2003.04.09, 03:06
and ive done another thistle one
Posted by Martijn 2003.04.10, 01:12
Thank you for the design. I don’t like to use buttons, but I use the xml feed button you’ve designed - just the right form for the function.
Posted by Joe Grossberg 2003.04.15, 07:31
Steal mine too (please download; don’t link to the images directly):
Powered … Apache.org Wished … Amazon Wish List Syndicated … LiveJournal Feed
Posted by Steve 2003.04.16, 20:47
Awesome job. These look great! :)
Posted by Plaka 2003.04.22, 22:39
Nice under-stated images … just what I wanted for my website remake.
Link added to www.ballad.gr/Project/new.html This will change to www.balladp2p.com from end of April 03.
Thanks :-)
Posted by Stephen L. 2003.04.25, 09:42
I think it was a mistake to give away these buttons. Make no mistake; your buttons are fantastic. But now all these little blogging “kids” will have them all over the place, and while I prefer them over “Whiner’s” gaudy RSS button, but pretty soon they’ll be all over the place, especially since The Plat’s adoption.
Posted by jh 2003.04.25, 11:54
I think it was a mistake to give away these buttons … pretty soon they’ll be all over the place
Stephen —- no one more surprised than me … I think it’s kind of funny. At any rate, they’re in the wild now. You just have to hope that people realise the whole point was unostentatious functionality and hope for the best.
Posted by Stephen L. 2003.04.27, 06:29
Of course, so are Dave Whiner’s ugly XML buttons. I much prefer Antipixel’s over Dave’s.
Posted by matthew 2003.04.30, 05:28
here is a Listed Blogshares one.
Posted by Joe Grossberg 2003.05.10, 05:48
Stephen L.
You should learn to have a sense of humor about such things.
People (“all these little blogging ‘kids’,” in your words) are having fun with this. I say, let them.
Posted by matthew 2003.05.11, 04:17
Ive redone all mine at the standard 80x15 size
Posted by matthew 2003.05.12, 06:51
err, just thought id mention this incase anyone else has the same thing happening, but im using Safari and in that this page keeps loading as raw html, then if i hit refresh its fine.
Posted by silversow 2003.05.22, 07:09
your buttons are purdy
Posted by Robin Lionheart 2003.06.01, 11:23
I like your style. Converting them to PNG format and crushing them with pngcrush saved a few bytes. I’ve made XHTML 1.1 and XHTML Basic buttons for my pages at RobinLionheart.com.
Posted by Ajay lal 2003.06.02, 23:04
Dear Sir, We are an Indian Company engaged in the manufacture of high quality Beads and Buttons made of : - 1) Glass 2) Horn 3) Bone 4) Wood 5) Resin 6) Metal We are in this manufacture for the last two decades and we can assure you that our quality is very good and the prices are very reasonable. In case of order we assure timely delivery. We also have MIXED BEADS, which we offer at incredibly low price. We request you to give us a chance to serve you. In case you need to see our collection, we can email them. Looking forward to hear from you. With Best Regards.
[Contact info removed because Antipixel doesn’t like commercial posts. The rest of the comment stays because it’s just so funny. —jh]
Posted by matthew 2003.06.04, 02:57
hmm. smells like spam.
Posted by jh 2003.06.04, 22:00
Matthew —- Yep, but it had me laughing out loud so it stays. I have amended it somewhat. Buttons indeed!
I’ve set up an implementation of CSS buttons using your design. I think they look pretty good. The background of the links is actually a translucent png, but for some reason Safari won’t show the background glasses image when you scroll down the page so I can’t see the transparency well.
Posted by Matthias 2003.08.18, 06:31
great buttons!!
I use em on http://www.netsensei.nl
thx!!
Posted by cancel aol 2003.08.21, 10:23
‘Silkscreen’ is one of my favorite fonts. So… nice choice. -cancel
Posted by hermes922@aol.com 2003.09.04, 21:29
you suck!
Posted by ebay guy 2003.09.08, 13:36
Joe Grossburg, I’m going to steal your “Perl Powered” button! Thanks!!
Posted by Sukhjeet 2003.09.08, 22:16
Thanks a lot for the nice buttons.
Posted by web_client 2003.10.01, 14:33
Thanks, guys, the truth, here it is possible to find many useful things with your help, in particular buttons.
Posted by Pulat Yunusov 2003.10.24, 09:54
Thanks for the buttons, I really appreciate it.
Posted by Websites for Sale 2003.10.31, 08:20
nice, simple and clean!
Posted by Craig 2003.11.08, 14:44
Thanks for sharing. Many small things add up to large things, and your contribution is greatly appreciated by many.
Posted by Anti Dialer 2003.11.12, 12:40
They load fast, but you can have better results if you use css.
Posted by Atkins Diet 2003.11.15, 17:42
Hello. I just wanted to give a quick greeting and tell you I enjoyed reading your material.
Posted by dada news 2003.12.14, 08:55
Thanks!!
and one Questions… what font did you use for these icons?
Posted by jh 2003.12.14, 09:55
The font is Silkscreen by Jason Kottke.
Posted by brad knapp 2003.12.17, 07:59
I took your little button and slightly modified ti so that people that didn’t yet know what RSS is might get their interest piqued. Check it out at my little photoblog lower right column
Posted by keno 2003.12.22, 16:45
Great buttons, thank you !!
Posted by Logo dzwonki polifoniczne sms 2004.01.03, 03:07
Hello! You have a great blog. I am a maniac-blog-reader and i’m bookmarking this blog.
Comments have been closed for this entry.
Send This Story to an Enemy
• • •
