KOMPOOS.NL

w3c buttons CSS

home » css » text-effects » w3c-buttons.html

sitemap


w3c buttons gemaakt van puur CSS

W3C HTML 5.0 | W3C CSS

uitleg w3c button procedure

Elke http-request die je kan voorkomen is er één. Dit geldt in het bijzonder voor hele kleine grapics. Of je nu een request doet voor een image van 200 bytes of één voor een image van 500Kb, de request(tijd) zal er niet (meer of) minder door worden. Het is verstandig om (als het kan) deze plaatjes te vervangen door puur CSS. Bij de W3C-buttons is dat makkelijk. Plaats de html-code die hieronder staat in de body-sectie van jouw pagina, en plaats de stylesheet in de head-sectie van jouw pagina.

html code voor de w3c buttons


<div class="w3c-button">
	<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fkompoos.nl%2Fcss%2Ftext-effects%2Fw3c-buttons.html;verbose=1"><span class="w3c">W3C</span> HTML 5.0</a>
	<a href="http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=2&uri=http%3A%2F%2Fkompoos.nl%2Fcss%2Ftext-effects%2Fw3c-buttons.html"><span class="w3c">W3C</span><span> CSS</span></a>
</div>

stylesheet voor de w3c buttons


<style type="text/css" media="screen">
	.w3c-button{
		margin:1em 0;
		width:9em;
		font-family:helvetica,arial,sans-serif;
		font-size:70%;
		font-weight:bold}
	.w3c-button a{
		display:block;
		width:100%}
	.w3c-button a:link,.w3c-button a:visited,.w3c-button a:hover{
		background-color:#fc6;
		color:#000;
		text-decoration:none}
	.w3c-button a:link,.w3c-button a:visited{
		border:1px solid #cecece}
	.w3c-button a:hover{
		border-left:0}
	.w3c-button span.w3c{
		padding:0 0.4em;
		background:#fff;
		color:#0c479d}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.