Estilos de botões com CSS

Código html:
<button>Button</button>

CSS:

  1. #el01 {width:100%} /* Width */
  2. #el02 { /* Text and background colour, blue on light gray */
  3. color:#00f;
  4. background-color:#ddd
  5. }
  6. #el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
  7. #el04 {border-width:6px} /* Border width */
  8. #el05 {border:2px dotted #00f} /* Border width, style and colour */
  9. #el06 {border:none} /* No border */
  10. #el07 {font-family:"Courier New",Courier} /* Different font */
  11. #el08 {font-size:2em} /* Bigger text */
  12. #el09 {font-size:0.5em} /* Smaller text */
  13. #el10 {font-weight:bold} /* Bold text */
  14. #el11 {padding:1em} /* Increase padding */
  15. #el12 {text-align:right} /* Change text alignment */

Resultado:

Botão CSS

Resultado em outros OS:

  1. Camino 1, Mac OS X 10.4.8
  2. Firefox 2.0.0.1, Mac OS X 10.4.8
  3. Firefox 2.0.0.1, Ubuntu 6.10
  4. Firefox 2.0.0.1, Windows XP
  5. iCab 3.0.3, Mac OS X 10.4.8
  6. Internet Explorer 6, Windows XP
  7. Internet Explorer 7, Windows XP
  8. Konqueror 3.5.5, Kubuntu
  9. OmniWeb 5.5.1, Mac OS X 10.4.8
  10. Opera 9.10, Mac OS X 10.4.8
  11. Opera 9.10, Ubuntu 6.10
  12. Opera 9.10, Windows XP
  13. Safari 2.0.4, Mac OS X 10.4.8
  14. WebKit 420+, Mac OS X 10.4.8

Notícia completa
Fonte: 456 Berea Street Home

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s