Antipixel buttons without images

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=""><span class="w3c">W3C</span> <span class="spec">XHTML 1.0</span></a>

I prefer a slightly simpler version:

<a class="silbutton" href=""><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 “W3Cshould 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 :)

I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing and articles. You can take a look at some projects I've worked on and some of my writing. If you'd like to talk about your upcoming project, do get in touch.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)