So, I saw this I ♥ WordPress logo competition on WordPress.com Forums, and thought I could make some “web 2.0 style” badges so everyone could use to show their appreciation for WordPress… and here they’re.
You’re free to use these images on your site under the terms of a Attribution 2.0 Chile License by Creative Commons; please don’t hotlink: copy them to your own server/Flickr/ImageShack/etc.
If you really liked them, you may send me a donation through PayPal (of course that would make me very, very happy).
The CSS code that’s along every image should be useful if you would like to use image replacement; just use this XHTML code to insert your image:
<div><a id="i-heart-wp" title="I ♥ WordPress" href="http://www.wordpress.org">I ♥ WordPress</a></div>
And insert the proper CSS on the document’s header.
Images for light backgrounds (white matte)
| Image |
CSS |
 |
a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:120px;
height:120px;
background:url('i-heart-wp-whitematte.png') top left no-repeat;
}
|
 |
a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:100px;
height:100px;
background:url('i-heart-wp-corner-whitematte.png') top left no-repeat;
position:absolute;
right:0;
top:0;
}
|
 |
a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:120px;
height:77px;
background:url('i-heart-wp-band-whitematte.png') top left no-repeat;
position:absolute;
right:0;
top:0;
}
|
Images for dark backgrounds (black matte)
| Image |
CSS |
 |
a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:120px;
height:120px;
background:url('i-heart-wp-blackmatte.png') top left no-repeat;
}
|
 |
a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:100px;
height:100px;
background:url('i-heart-wp-corner-blackmatte.png') top left no-repeat;
position:absolute;
right:0;
top:0;
}
|
 |
a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:120px;
height:77px;
background:url('i-heart-wp-band-blackmatte.png') top left no-repeat;
position:absolute;
right:0;
top:0;
}
|
If you would like to create a customized version, you can download the PSD (Photoshop) files
Enjoy!