cssbuttons

Hoy me toco una tarea de las mas comunes, realizar un boton con css, consigna:

  • que se vea lindo
  • que sea funcional
  • que se adapte al contenido

Comparto algunas cosas que siempre tengo en mente y algunas tecnicas a las que recurro.


Regla general
rollovers: Realizar una única imagen para todos los estados que posea el boton, esto hace que cargue mas rapidamente  y no tengamos ese segundo de blanco cuando alguien se posa sobre el boton.

Además se puede agilizar llamando a la imagen en cuestion en la tag “body”
<body onLoad=”MM_preloadImages(‘img/imagen.gif’)”>

Escribimos
Html: <a href=”/”> texto del boton </ a>
(De acuerdo a la técnica utilizada agregaremos algunos <span></span>)

css: a.button {
cursor:pointer;
border:1px solid #fff; }

Cursor: pointer, para que aparezca la manito.

Definimos el border porque en algunos navegadores aparece por defecto un borde gris, generalmente le pongo el color de fondo, en casos como alguna imagen compleja simplemente border:none.


Algunas tecnicas destacadas

  1. Interesante para normalizar botones en desarrollos extensos o con demasiados formularios http://sexybuttons.googlecode.com/svn/trunk/index.html
  2. interesante boton transparente coloreado con css, nos ahorra muchas imagenes al hacer una sola para todos http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/
  3. Compilado de tecnicas para botones adaptables al contenido: http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
  4. graficamente interesante http://blog.nublue.co.uk/css-hover-button/Demo: http://www.nucopy.com/
  5. Oval buttons http://www.jorkas.com/lab/css/rounded_button/index.html

Hay mucho para decir sobre botones, los comentarios, sugerencias, críticas constructivas estan abiertos.  Siempre con respeto.

About The Author

Diseñadora grafica / Desarrolladora web / wordpress themes y mas

No Comments