Gigadesign, XHTML-CSS website maken

Een bewijs dat er echt power in Css zit

De standaard buttons :

Dit zijn dus de originele afbeeldingen, nu gaan we ze eens maken zonder afbeeldingen, puur met Xhtml (of Html) en CSS.

De universele Html:

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

En dan nu de CSS voor voorbeeld 1

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

Een voorbeeld van de bovestaande code.

En dan nu de CSS voor voorbeeld 2, een geanimeerde button

De Xhtml code blijft dezelfde

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

Bekijk het resultaat van deze CSS code, je moet wel met je muis over de afbeelding gaan voor het effect te zien.