Cambiar el color a los botones

|

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"/>

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"/>

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"/>

O bien, puedes cambiar ambos:
<input style="color: #003366; background-color: #99CCFF" value="Buscar" name="button" type="submit"/>

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">

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">


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.

47 comentarios:

Ivan dijo...

hola!!!! ya he creado mi blog te queria preguntar si no lo podias poner en ''blogs de ayuda''gracias.

El Potro™ dijo...

Hola Ivan,

Cuando tengas más tiempo con el blog y tengas más posts con gusto lo agrego.

Saludos.

cyberbloggero dijo...

Tomando apuntes... tomando apuntes...

Vamos a ver si con lo que nos enseñas en tu blog, mas lo que dice el libro, logro aprender algo. Si tu tienes algún otro material del que pueda aprender... te voy a estar eternamente agradecido.

Un abrazo!!!!

El Potro™ dijo...

Jajaja, ya descansa un poco del estudio, entre tanta lectura y las radiaciones de tus explosivos vas a quedarte sin neuronas, jajaja.

Un abrazo.

cyberbloggero dijo...

Jajajaajajjaaj.... tienes razón!! mejor me voy a dar una vuelta por ahí, a despejar un poco las únicas neuronas que sobrevivieron a la radiación. jeje.

Un abrazo!!!

el venado dijo...

Hola.
¿Podrias poner mi blog en alguna lista de blogs?
Ultimamente tengo muchas visitas, pero no muchos dejan comentarios.

Saludos

Jorge dijo...

Hola.
Me gustaron estos detalles para personalizar el buscador interno del blog... voy a hacerlo.
Saludos

El Potro™ dijo...

Hola el venado,

Con agregarte a alguna lista la gente no va a comentar más o comentará menos. Eso es normal, menos del 10% de la gente que visita un blog deja un comentario.
Lo que puedes hacer es poner algunos gadgets de "Últimos comentarios" o "Top de comentaristas" algunos logran con estos gadgets que la gente comente más.

Saludos.

El Potro™ dijo...

Hola Jorge,

Seguro quedará mejor el buscador con estos detalles =)
Saludos.

Dj Nestor dijo...

Holaa!
Me han gustado estos trucos y ya los he puesto en mi subscripcion
muy bien,
Aora mi duda,
¿como puedo dar una función a un boton?
es decir: si vas a mi blog, en las sidebar, al final de todo esta la subscripción y lo del seguimiento(sacado de ciudad blogger XD)
entonces me gustaria poner un boton en vez de la frase:"Haz clic para seguir este blog"

Se poner el boton, pero no se hacer para que cuando pinches sobre el salga la pagina de seguir

http://djnestornules.blogspot.com

No se si me habre explicado bien pero...
Espero tu respuesta!

El Potro dijo...

Hola Dj Nestor,

Usa este código para poner el enlace en el botón:

<form action="URL del enlace"><input value="Seguir este blog" type="submit"/></form>

Saludos.

Dj Nestor dijo...

Buenoo!
Aora me ha surgido otro problema, cuando le doi al boton de seguir me da el problema:
bX-g161gh

No se si sera por que es mi blog o no se

Blog: http://djnestornules.blogspot.com
Problema: http://img407.yfrog.com/img407/3473/problemag.png

GrAcIaaSss!!

El Potro dijo...

Es un error de Blogger. Notifica este error en el foro de ayuda de Blogger para que algún empleado de Google te dé indicaciones.
http://www.google.com/support/forum/p/blogger?hl=es

Saludos.

Dj Nestor dijo...

JO
Aora otro problema :(
Me ha salido un problema diferente:(
bX-cxmeen
:(:(:(:(:(:(
Si supieras como arreglarlo...
Por si acaso lo pondre en el foro de ayuda pero aun no me han respondido al 1º problema, asi que no estoi mui seguro

El Potro dijo...

Lamentablemente todos esos errores son de Blogger y sólo en el foro podrían decirte qué sucede. Aunque seguro te recomendarán que elimines las cookies y el cache de tu navegador.
Saludos.

El Potro dijo...

No es necesario que mandes tu plantilla, sólo entra en Diseño > Edición de HTML y busca esta línea:

input id='search-submit' type='submit' value='Search'

Cambia lo que está en negrita por Buscar.
Saludos.

Mundo Tv dijo...

DISCULPAME POR MANDAR MI PAGINA SOLO QUERIA QUE VEAS EL BUSCADOR YA ILIMINE MI COMENTARIO Y OTRA CONSULTA SI FUERAS TAN AMABLE ME DIRIAS COMO CAMBIO EL COLOR DE LA LETRA Y EL COLOR DEL BORDE DONDE DISE (Buscar) DE MI PLANTILLA? Gracias y DISCULPA POR MENSIONAR MI PAGINA NO LO VOLVERE ASER

SALUDOS 100% CIUDADBLOGGER ^^

El Potro dijo...

No, no, yo no decía que no pongas tu página, sino que no era necesario ver el archivo de la plantilla.
La página está bien, de hecho siempre es preferible que dejen la URL de su página para saber cuál es el problema ;)

Busca en tu plantilla esta parte:

#search-submit {
height: 21px;
margin-left: 12px;
color: #39561D;

Donde dice color es el color del texto, y para agregarle un borde pon debajo esto:
border: 1px solid #000;

En donde dice #000 puedes cambiar el color que quieras.

Saludos!

Mundo Tv dijo...

HOLA CREO Q TE CONFUNDISTE DE LUGAR O MI PLANTILLA DE MI BLOG ESTA DESORDENADO XD PERO BUENO LO COLOQUE EN AQUI Y ME FUNCIONO :

#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
border: none;
border: 1px solid #FFFF00;

SALUDOS !

100% CIUDADBLOGGER ^^

El Potro dijo...

Tienes toda la razón, no noté que en tus estilos tenías #search input
Mil disculpas, hoy no sé dónde tengo la cabeza :S

Saludos.

El Potro dijo...

Hola PeruanoTeve,

Si quieres eliminar el buscador entra en Diseño > Edición de HTML, busca este código y elimínalo:

<!-- Search -->
<div id='search'>
<form action='/search' method='get'>
<fieldset>
<input id='search-text' name='q' size='15' type='text'/>
<input id='search-submit' type='submit' value='Buscar'/>
</fieldset>
</form>
</div>
<!-- /Search -->

Saludos.

documentosdearquitectura dijo...

Potro quiero saber como centrar mi Titulo y que quede bien con bordes y todo... gracias

ARQUITECTURA dijo...

hola bueno aqui te dejo mi blog de pruebas! aver si lo entiendes mira la cabecera esta hacia la izquierda! lo reemplaze en vez del titulo! lo que quiero es saber como centrarlo o si agrandar más la imagen ancho, etc! quisiera saber que tamaño debe ser mi cabecera para que encaje bien dependiendo del ancho de mi pantilla! gracias

ARQUITECTURA dijo...

aqui esta el link :

http://arquitecturadocumentos.blogspot.com/

El Potro dijo...

Si subes la imagen de la cabecera desde Elementos de la página va a ser todo un lío, pues el espacio determinado para tu cabecera es muy reducido por lo cual se encimará la imagen al menú, y otros posibles elementos.
Lo recomendable es que busques en tu plantilla esta línea:

#header {

Y debajo de ella pegues esto:

background:url(URL de la imagen)center no-repeat;

Con eso la cabecera estará centrada de fondo y no interferirá con los demás elementos del blog.

Saludos.

Eloy Monter dijo...

Hola!! que tal, me agradó sobre manera éste post!! solo tengo una duda... cómo puedo hacer para que ésto mismo pase con los links que tengo, por ejemplo, cuando paso el puntero en una etqueta, me gustaría cambiar la apariencia de esa mini ventana! muchísimas gracias!!

El Potro dijo...

Hola Eloy Monter,

Para personalizar los enlaces, cambiarles el color, color de fondo, etc. visita esta entrada.

¡Saludos!

Eloy Monter dijo...

Hola otra vez!! ya habia checado ese link, incluso ya lo llevé a la práctica! pero... mi duda es otra... he notado que cuando tenemos un botón o un link en blogger aparece siempre el título del enlace con un fondo igual al de los botones que nos enseñaste a modificar en este post!

por ejemplo si creo un botón en un menú con listas, y a cada botón le pongo un nombre, por ejemplo ( title="Principal" ) cuando ponga el puntero sobre el enlace aparece el nombre que pusimos en "title" con ese mismo fondo, mi duda, es cómo modificar ese fondo ??

espero puedas ayudarme! gracias por la atención paracon tus seguidores! ^^

El Potro dijo...

Hola de nuevo Eloy,

Creo que ya te he entendido ¿te refieres al título del enlace que aparece al poner el cursor sobre él?

Por defecto esos títulos (tooltips) tienen un color de fondo como arena, según el navegador, pero hay diferentes formas de personalizarlo.
Yo no tengo un post que hable sobre ello pero te dejo un enlace que explica cómo hacerlo:
http://vagabundia.blogspot.com/2006/11/tooltips-usando-css.html

¡Saludos!

Eloy Monter dijo...

Muchas, Muchas gracias!! si, eso es lo que buscaba!!
nuevamente, gracias por la atención!!!

saludos!!

ARQUITECTURA dijo...

Hola potro! deseo que me ayudes que problema tengo en la cabecera de mi blog, bueno lo dividi en dos partes de acuerdo a unos pasos que segui! pero por ejemplo deseo poner al costado del titulo un buscador y aparece de la sigte forma de agranda o se disrtociona, échale un vistazo! gracias

El Potro dijo...

Quizá el gadget del buscador está muy grande o quizá faltó limpiar los estilos de la cabecera.
Intenta poner otro gadget, si sucede lo mismo pregunta donde viste cómo dividir la cabecera qué estaría pasando, quizá sólo sea un pequeño detalle.

videotube dijo...

Potro si siogue igual con otro gadget, bueno lo vi aqui : http://elescaparatederosa.blogspot.com/2008/11/dividir-la-cabecera-del-blog.html

videotube dijo...

Potro!! parece que ya lo arregle tenia que eliminar unos bordes! bueno pero ahora como lo centro osea el buscador esta muy arriba, noc si me dejaré entender!

videotube dijo...

ah otra cosa noc por que mi barra de menú se movio o se centro el HOME - about .etc

El Potro dijo...

Mira aquí cómo alinear gadgets.
Si el menú se movió sí debe ser por lo que te decía que había que limpiar los estilos o quizá hayas excedido en el tamaño al dividir la cabecera.

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo