Botões de validação da W3C sem imagem.

Posted: November 5th, 2009 | Author: andre | Filed under: Geral | No Comments »

O grande problema destes botões da W3C é que não se encaixam muito bem em qualquer layout.

A solução seria criar outra imagem de botão, mas porque criar um imagem simples se podemos fazer algo com o mesmo efeito usando CSS?

Então utilizando o código abaixo criamos os dois links para a validação:

<a class="w3cbutton" href="http://validator.w3.org/check?uri=referer">
   w3c
      <span>
          xhtml 1.0
      </span>
</a>
<a class="w3cbutton" href="http://jigsaw.w3.org/css-validator/validator?uri=referer">
   w3c
      <span>
         css 2.1
      </span>
</a>

Aí então aplicamos as regras de formatação CSS para os links.

.w3cbutton {
  border: 1px solid #ccc;
  font-family:Tahoma,Arial,Helvetica,sans-serif;
  font-size: 8px;
  font-weight: bold;
  background-color: #fff;
  color: #0c479d;
  padding: 0 0 0 3px;
  margin: 10px;
  position: relative;
  text-transform: uppercase;
}
.w3cbutton span {
  background:#FECB65;
  padding: 0 3px 0 5px;
  margin: 0 0 0 3px;
  text-transform: uppercase;
  color: #000000;
}

Pronto, o resultado é bem melhor que os enormes botões da w3c não?

w3c validation buttons