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:
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:
- Only the left (white) half is clickable in Internet Explorer (the whole button is clickable in Mozilla and Opera).
- Different style is needed for the button with a longer spec name (like XHTML 1.0) and with a shorter one (e.g. CSS).
- The picture breaks, if a user changes font size.
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:
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.