Thought Lateral

We love Pixies!

On an obscure night in 2008 whilst creating a design using pixel buttons (which also go by the names of pixel badges, and antipixel, etc)  I thought “Wouldn’t it be a great idea if no pixels were used? Instead the button (or badge) is composed entirely by Cascading Style Sheet (CSS) code!”

Yeah, fantastic! My web fortune is upon me and I can retire in the lap of luxury!

In the sober light of day however, I find the idea is sooo fantastic it had been thought of  years ago (going back as far as 2002 I discovered). So I kept the day job.

Even so,  I’ve not yet come across CSS badges (pixeless buttons) that mimic the style of their pixel counterparts. This may be because no one has tried it, or more likely because my browser doesn’t  get about much. So I set about constructing a demo of a CSS badge (pixeless pixel button) that would look like a pixel button.

The CSS has ’scope for refinement’ – which is a kinder way of saying it was a quick kludge.

/*CSS code */
table.badge {
border-style:solid;
border-width: 1px;
border-color: #666;
font-size: 8px;
font-family: sans-serif;
color: #fff;
line-height: 6px;
background-color: #fff;
}
table.badge tr {
background-color: #888;
text-align: center;
text-transform:uppercase;
margin: 0px;
padding: 0px;
}
table.badge td.main {
background-color:#f60;
}

<!– html code –>
<table cellspacing=1 cellpadding=0 class=”badge” width=”88px” height=”15px”">
<tr><td class=”main”>px</td><td>free</td></tr>
</table>

Some examples I made earlier can be found here.

I refer to these pixeless pixel buttons as “Pixies” because it sounds cute, and is less likely to leave your tongue in a knot when saying it.

Other related sites:

www.pixelbutton.com – the pixel button website where you can create pixel graphics.

ZwahlenDesign, “Web Badges / Buttons” – the site containing CSS web buttons

http://www.antipixel.com/blog/archives/2002/10/22/steal_these_buttons.html – the original antipixel blog post