Here is my badge.

Badges are popular. What are badges? They are the funky little 80 x 15 graphics. They usually exist to point to RSS feeds, or brag about which blogging software is being used, or how valid a given page is. They are most popularly used by bloggers the world over. So today I ran into a link about how to make HTML + CSS only (no image) W3C validated buttons. I thought, why not apply this to badges?

These badges come in two flavours, absolute and relative. The absolute badges are, erm, absolutely sized, and fit within the 80x15 pixel constraints. The relative positioned badges size up and down with the font. There is no 'semantically-null' markup here either, assuming you agree with the proposition that divs can contain semantic meaning, for instance, when they are used as containers.

When you want to use this, give the left and right hrefs their own classes, and style them as you will (different foreground and background colors, etc.).

I think that my choice of fonts is reasonable, but I would love to hear from mac and linux users as to a good choice for a monospace font.

The buttons

Increase and decrease your text size, to see the difference between absolute and relative

Other badges

The code

<style>
.badge
{
    overflow: hidden;
    margin: 3px;
    border: 1px solid #000;
    padding: 1px;
    
    color: #000;
    background-color: #fff;
    font-family: Silkscreen, "Andale Mono", "Lucida Console", "Courier New", Courier, mono;
    font-weight: bold;
}

.badge a
{
    display: block;
    padding: 2px 3px 1px 3px;
    text-decoration: none;
}

a.badgeLeft
{
    float: left;
    
    margin: 0px;
    margin-right: 3px;
    border: 0px solid #fff;
    border-right-width: 1px;

    color: #000;
    background-color: #fff;
    text-decoration: none;
}

a.badgeRight
{
    color: #fff;
    background-color: #000;
}

.badgeRelative
{
    max-width: 11em;
    font-size: xx-small;
}

.badgeAbsolute
{
    max-width: 80px;
    max-height: 15px;
    
    font-size: 7px;
}
</style>

Usage

Here is the basic markup:

<div class="badge badgeRelative">
     <a class="badgeLeft" href="#">???</a>
     <a class="badgeRight" href="#">DEFAULT</a>
</div>

Depending on what you want, you will want to use the badgeRelative or badgeAbsolute class. This will give you:

Then it is just a case of customizing the left and right classes. The best way to do it is to add a class, and style for it, for instance:

<style>
a.s9y
{
    color: #fff;
    background-color: #986;
}

a.power
{
    color: #000;
    background-color: #FEA;
}
</style>
<div class="badge badgeRelative">
    <a class="badgeLeft s9y" href="#">S9y</a>
     <a class="badgeRight power" href="#">POWERED BY</a>
</div>

Which will give you this:

There ya go. Have fun with the code, it's released to the public domain.