This is as days pass by, by Stuart Langridge

Last night I got the idea of trying to replicate the pretty Antipixel buttons without using images (prompted by a comment there from jwz). Then I fell asleep in my chair. This morning I discover that Marek Prokop has already done the right thing here. However, I think his styling's a little overwrought. Marek creates his buttons as a DIV and then adds a link inside, and spans inside that:

<div class="w3cbutton3">
      <a href="http://validator.w3.org/check/referer"><span class="w3c">W3C</span> <span class="spec">XHTML 1.0</span></a>
    </div>

I prefer a slightly simpler version:

<a class="silbutton" href="http://validator.w3.org/check/referer"><strong>W3C</strong>
<em>XHTML 1.0</em></a>

Then you change Marek's CSS slightly:

    .silbutton {
      margin: 1em 0;
      width: 9em;
      border: 1px solid #ccc;
      font-family: helvetica,arial,sans-serif;
      font-size: 70%;
      font-weight: bold;
      display: block;
    }
    .silbutton:link, .silbutton:visited, .silbutton:hover {
      background-color: #fc6;
      color: #000;
      text-decoration: none;
    }
    .silbutton span.w3cstrong {
      padding: 0 0.4em;
      background-color: #fff;
      color: #0c479d;
      font-weight: bold;
    }
    .silbutton em {
      font-style: normal;
    }

(i.e., style the A element directly, rather than wrapping it in a div and styling the div). I've also used semantic tags that seem appropriate, rather than named spans; it seems to me that "W3C" should be strongly emphasised in this, and your level of compliance emphasised over ordinary text.

Anyway, only minor tweaks. It would be nicer to emulate Antipixel's actual (very pretty, but still all text and colours and borders, which should be doable in pure HTML and CSS) buttons, which I shall have a crack at later if someone doesn't beat me to it :)