buttons: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(Updated image URLs)
(URLs updated again (cleaning house))
Line 142: Line 142:
=== [[hatom|hAtom]] ===
=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.corvidworks.com/microformats/hatom.png
* http://www.corvidworks.com/files/microformats/hatom.png

=== [[hresume|hResume]] ===
=== [[hresume|hResume]] ===
Line 207: Line 207:
=== Style 3 ===
=== Style 3 ===

Example: http://files.corvidworks.com/microformats/hatom.png
Example: http://www.corvidworks.com/files/microformats/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.corvidworks.com/microformats/button2-blank.png)
# Get the blank icon (http://www.corvidworks.com/files/microformats/button2-blank.png)
# Type:  
# Type:  
<pre>convert button2-blank.png  
<pre>convert button2-blank.png  
Line 242: Line 242:
The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):
The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):


== Palette ==
== Palette ==

Revision as of 04:42, 10 May 2009

Microformats Buttons

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - Tantek

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - Ruben


If you add links to buttons you have designed, please also include a statement that you do one of the following:

  • release them into the public domain
  • hold copyright, but release all rights as to it use
  • license them under a specified free license, e.g. consider using a Creative Commons license, such as cc-by-3.0.

Thank you.


Microformat Button

I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.


I already have a "I use microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

  • microformat.png
  • microformat_enabled.png
  • emf_green.png
  • mfe_green.png
  • mwmf_green.png
  • smf_green.png
  • emf_white.png
  • mfe_white.png
  • mwmf_white.png
  • smf_white.png


››› hCalendar

Code (white space added for readability):

<span class="badge" 
      style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
      border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
      text-align: center;">
 <span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; 
       margin-right: 0.1em;">



  • license.png
  • microformat_rellicense.png


  • nofollow.png
  • microformat_relnofollow.png


  • rel-tag.png
  • tag.png
  • microformat_reltag.png


  • votelinks.png
  • microformat_votelinks.png


  • xfn.png
  • microformat_xfn.png


  • xmdp.png
  • microformat_xmdp.png


  • xoxo.png
  • microformat_xoxo.png

CSS Styles for microformats

I'm not sure wether this can be under buttons, but I don't know where else to put it. This is a stylesheet containing styles for most microformats. And, it's automatic. I release it under the cc by-sa. Please note that I am new to microformats, and if you can improve this, please do. Mac Lover 13:25, 13 Apr 2007 (PDT)

License Zip

CSS Buttons

As there are new microformats happening all the time I set about making a CSS button that looks like the handmade versions. This is the result.

The file with the CSS and the two images required (logo and background) can be downloaded from The Beastly Beasts.

Extract the microformat directory and the files in it to /css so that you have:

If your paths are different a bit of editing is needed.

The XHTML to create a button is:

<tag class="microformat-button microformat-type"><span></span>microformat-type</tag>

For example, an hCard button with a link to the spec:

<a href="http://microformats.org/wiki/hcard" title="Microformat enabled" class="microformat-button hcard"><span></span>hcard</a>

Buttons for draft formats

These may be subject to change if the names of the formats change when they are released.


  • adr.png


  • geo.png


  • hatom.png
  • hatom.png


  • hresume.png
  • microformat_hresume.png


  • hreview.png


  • directory.png


  • enclosure.png


  • rel-home.png
  • home.png


  • payment.png

Robots Exclusion

  • robots.png


  • xfolk.png

Make your own buttons

Style 1

Example: hcard.png

Use the Kalsey Button Maker with the following settings:

  • Outer border: #666666
  • Inner border: #ffffff
  • Bar position: 25 pixels from the left
  • Left box text: >>>
  • Left box background: #000000
  • Left box text color: #ffffff
  • Left box text start: 7 pixels from the left
  • Right box text: (The name of the microformat goes here)
  • Right box background: #31757b
  • Right box text color: #ffffff
  • Right box text start: 3 pixels from the bar

Style 2

Example: hcal.png

  1. Get the font Silkscreen
  2. Install ImageMagick
  3. Get the blank icon (blank.png)
  4. Type:
convert blank.png 
 -fill white 
 -font Silkscreen 
 -pointsize 8 
 -draw "text 28,10 'button label'" 

Style 3

Example: hatom.png

  1. Get the font Silkscreen
  2. Install ImageMagick
  3. Get the blank icon (button2-blank.png)
  4. Type:
convert button2-blank.png 
 -fill white 
 -font Silkscreen 
 -pointsize 8 
 -draw "text 20,10 'button label'" 

Microformats Logos

Rohit is a very poor CSS hacker, but gave it his best shot. He also rendered it at 72 and 18 points.



The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):




I created a cheatsheet using Big Huge Lab's Badgemaker:
1296783076_1d6fe8a1f8_m_d.jpg --Carla 12:11, 1 Sep 2007 (PDT)

Wiki buttons

For use on this wiki.

  • new! - {{NewMarker}}
  • Success! - {{SuccessMarker}}
  • updated! - {{UpdateMarker}}


  • Logos for all microformats
  • When someone has time, these should be repeated on the page for each respective format.

See also