FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


W3C buttons without images





oneoo
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:

W3C XHTML 1.0
W3C CSS
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
W3C XHTML 1.0
.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
W3C XHTML 1.0
.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.
misterdimiz
that's good, but why not using images? Wink
ml
i upped them, so they're easier to see for everybody

http://martin.frih.net/asdf.html
Ashims
Thats a good way to do it (although, you could pretty it up a bit). No need to have pesky images downloading all the time wasting your bandwidth and what-not.
Related topics
all images appear corrupt!
Turn off your radio and television
What softwares are good for biulding a webpage?
Need comments for my site
very very simple templates for begginers
Would you use this? Sim and Sim Blog Software
CSS Help...
layout changer
My Old Tripod Site
Editing the content of the ads
My new site
Buying website space/ads
Rollover Buttons or Images
Design with no images
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.