W3C buttons without images

Note: W3C buttons on this page are made without images using pure XHTML and cascading style sheets (CSS) that are not properly supported by browsers like Internet Explorer 4 and Netscape Navigator 4.

Original W3C icons

Just for reference, the original buttons (images) are here:

Valid XHTML 1.0! Valid CSS!

Look at them closely, this is the last time you can see an image on this page.

A pixel perfect one, almost…

Although it is possible to make the W3C button almost pixel perfect using CSS only, as you can see on the example below, this approach has a lot of drawbacks.

W3C XHTML 1.0

The most important issues are:

That's why I discarded this solution and tried another one.

Resizable buttons

Yesterday I came to Antipixel (via Zeldman) and was impressed by the slim W3C buttons there. Their only disadvantage was that they were images. So here are similar slim buttons made with XHTML and CSS only:

They are fluid, i.e. you can change the font size in your browser and their size changes as well. They have two clickable parts (the white one on the left and the yellow one on the right) that can link to two different targets. They should look fine in Internet Explorer 5+, Opera and Mozilla. Without CSS they are just plain text links.

Code

XHTML

XHTML (or HTML, if you prefer it) code is really simple:

<div class="w3cbutton1">
  <a class="w3c1" href="...">W3C</a>
  <a class="spec1" href="...">XHTML 1.0</a>
</div>
<div class="w3cbutton1">
  <a class="w3c1" href="...">W3C</a>
  <a class="spec1" href="...">CSS</a>
</div>

Without the style sheets the buttons are just the plain links:

W3C XHTML 1.0
W3C CSS

Hint: To prevent context dependent problems in IE5/Win, enclose every button in another <div>.

CSS

CSS is a little bit more sophisticated:

div.w3cbutton1 {
  position: relative;
  margin: 1em 0;
  font-family: helvetica,arial,sans-serif;
  font-size: 70%;
  font-weight: bold;
}
div.w3cbutton1 a {
  display: block;
  border-top: 1px solid #cecece;
  border-bottom: 2px solid #4a4a4a;
}
div.w3cbutton1 a.w3c1 {
  width: 3em;
  border-left: 1px solid #cecece;
  text-align: center;
}
div.w3cbutton1 a.spec1 {
  position: absolute;
  left: 3em;
  top: 0;
  width: 6em;
  border-right: 2px solid #4a4a4a;
  padding-left: 0.5em;
}
div.w3cbutton1 a.w3c1:link,
div.w3cbutton1 a.w3c1:visited,
div.w3cbutton1 a.w3c1:hover {
  background-color: #fff;
  color: #0c479d;
  text-decoration: none;
}
div.w3cbutton1 a.spec1:link,
div.w3cbutton1 a.spec1:visited,
div.w3cbutton1 a.spec1:hover {
  background-color: #fc6;
  color: #000;
  text-decoration: none;
}

Variations

Because the style sheet above is quite complex and some minor defects were reported in IE5/Win and IE5/Mac, I've developed a couple of variations. They all share the same HTML code:

<div class="w3cbutton3">
  <a href="...">
    <span class="w3c">W3C</span>
    <span class="spec">XHTML 1.0</span>
  </a>
</div>

There is only one link now and the button thus can point to one target only.

Simple

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

Animated

.w3cbutton4 {
  margin: 1em 0;
  width: 9em;
  font-family: helvetica,arial,sans-serif;
  font-size: 70%;
  font-weight: bold;
}
.w3cbutton4 a {
  display: block;
  width: 100%;
}
.w3cbutton4 a:link,
.w3cbutton4 a:visited,
.w3cbutton4 a:hover {
  background-color: #fc6;
  color: #000;
  text-decoration: none;
}
.w3cbutton4 a:link,
.w3cbutton4 a:visited {
  border-top: 1px solid #cecece;
  border-bottom: 2px solid #4a4a4a;
  border-left: 1px solid #cecece;
  border-right: 2px solid #4a4a4a;
}
.w3cbutton4 a:hover {
  border-bottom: 1px solid #cecece;
  border-top: 2px solid #4a4a4a;
  border-right: 1px solid #cecece;
  border-left: 2px solid #4a4a4a;
}
.w3cbutton4 span.w3c {
  padding: 0 0.4em;
  background-color: #fff;
  color: #0c479d;
}

Compatibility

The buttons above should look fine in IE5+/Win, IE5/Mac, Opera 7 and all Gecko-based browsers (Mozilla, NN6+). I'll appreciate your observations in another browsers. Thank you.

CSS Workshop home Recommended reading