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
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 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 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-;
}
.xmlbutton:hover {
background-color: FF9900;
}
.xmlbutton:active {
border-style: inset !important;
}
–>
</STYLE>
<A class="xml/">
<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! (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:
www.stewshack.com/icons/css2valid.gif www.stewshack.com/icons/xhtml11valid.gif 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;px; }
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:
www.pixy.cz/w3c-icons
Posted by elektronaut 2003.04.03, 19:45
sweet. :) i based my buttons on yours, with my own font
my blog my font, use freely
Posted by Anonymous 2003.04.06, 09:09
ive done 2
blogroll me!
and thistle
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
www.joegrossberg.com/archives/000574.html
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.