02/11/09

¿Como cambiar los colores de botones web?

Si quieres darle un estilo un poco mas personalizado a los botones de tu pagina web o para alguna plantilla en especial podemos cambiarle los colores, las formas, etc..

Para poder hacer eso no consta mas que agregar unos valores en HTML en el código original de un botón y se puede personalizar a nuestro gusto.

Aquí les dejare unos ejemplos con sus respectivos códigos HTML para que lo utilicen, también les dejare un ejemplo de la estructura de un botón simple como este:


<input value="Buscar" name="button" type="submit"/>




Este es el primer botón modificado, al cual le cambiamos el color de relleno del botón agregándole los valores que ven marcados en ROJO:


<input style="background-color: #FF9900" value="Buscar" name="button" type="submit"/>




Ahora modificaremos algo mas al botón, tenemos la posibilidad de cambiar también el color del texto del botón, con solo agregarle este valor que vemos marcado en VERDE en este código:


<input style="color: #FF0000" value="Buscar" name="button" type="submit"/>




También podemos modificar el fondo del botón por una imagen especifica, solo con agregar este valor marcado en AZUL al siguiente código:


<input style="color: #ffffff; background: url('URL de la imagen')" value="Buscar" name="button" type="submit">




O también podemos añadirle un borde del tamaño que queremos solo con cambiarle el valor de numero, cuando mas alto mas grueso el trazo.. para poder agregarle ese borde debemos agregarle este valor que les marco en MARRÓN en el siguiente código:


<input style="border: #000 1px solid; background-color: #FF99FF" value="Buscar" name="button" type="submit">




Con esos ejemplos ya pueden tener los códigos HTML suficientes para poder modificarlos a su gusto y placer, y también podemos modificar el texto 'Buscar' por otro que nos guste mas, porque recuerden que se puede utilizar para muchos otros botones no solo para los de búsqueda.

  • rss
  • Del.icio.us
  • Digg
  • Twitter
  • StumbleUpon
  • Reddit
  • Share this on Technorati
  • Post this to Myspace
  • Share this on Blinklist
  • Submit this to DesignFloat
 
Design by pedro el escamoso