2/11/2015 Cambiar el color a los botones INPUT |  Ciudad Blogger  Trucos y tutoriales para tu blog

http://www.ciudadblogger.com/2009/08/cambiarelcolorlosbotones.html 1/2

()

Cambiar el color a los botones INPUT(http://www.ciudadblogger.com/2009/08/cambiarelcolorlosbotones.html)

14 de agosto de 2009 Publicado por El Potro , (https://plus.google.com/114365374839797569377) Etiquetas: Trucos

(http://www.ciudadblogger.com/search/label/Trucos) ,

Aunque esto la mayoría lo sabe hacer, aun me siguen preguntando seguido cómo hacer para cambiar el color

de los botones de algunos gadgets, por ejemplo el botón de Buscar, el de Suscribir, etc.

El código común de un botón es como este:

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

Buscar

Lo único que hay que hacer es agregarle un estilo para que tenga un color de fondo:

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

Buscar

También puedes modificar el color de la letra, para ello agregamos el estilo "color":

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

Buscar

O bien, puedes cambiar ambos:

<input style="color: #003366; background-color: #99CCFF" value="Buscar" name="button"

type="submit"/>

Crea Tu BlogGratis

Diseña tu Propio BlogGratis. Gratuito y Rápido,

¡Hazlo Ahora!

wix.com

2/11/2015 Cambiar el color a los botones INPUT |  Ciudad Blogger  Trucos y tutoriales para tu blog

http://www.ciudadblogger.com/2009/08/cambiarelcolorlosbotones.html 2/2

(#outer-wrapper) (#footer) (javascript:Void(0))

Buscar

O si lo prefieres, puedes usar una imagen de fondo:

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

type="submit">

Buscar

Puedes también ponerle un borde al botón del grueso y el color que quieras:

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

type="submit">

Buscar

Como ves, puedes hacer muchas variaciones para decorar tus botones, sólo es cuestión de que eches a andar

tu creatividad y dejarás de tener los típicos botones grises.

Recuerda que donde dice value="Buscar" es el texto que aparece en el botón, también puedes jugar un poco

con él y cambiar ese texto por otro.

 

Acuario Marino GratisConvierte tu Pantalla en un Hermoso Acuario. ¡Consigue la App Gratis!

marineaquariumf ree.com

I Ciudad Blogger