como personalisar el boton imput html en css

Reyphp · #1 (**permalink**) 03/10/2011, 21:14

hola mi pregunta es que los botones en html ya tienen su diseño por defecto lo que pas es que como hago para que salga a mi estilo ejeplo

el boton salga azul y cuando alguien le ponga el cursor por encima cambie a color rojo

pero en css no en javascripts por favor.. hace poco encontre uno pero para usarlo tenia que poner el derecho de autor a la web donde lo encontre.... imaginense todos esos enlaces en todas las paginas donde este el botonsito jajajaja

por favor si pueden ponga en su respuestas si el codiguito es gratis o tiene copyright o almenos demen ideas de como se hace ya que se bastante de html y css pero en ese botonsito me quede parado ajjajaja

Batan · #2 (**permalink**) 03/10/2011, 22:50

De este modo podrias

Código HTML:

Ver original<input type="button" class="boton" value="personalizado" />

Código CSS:

Ver original.boton{color: #fff; background-color: #3195d2;}
/*input{color: #fff; background-color: #3195d2;} esta seria otra forma de hacerlo*/

Saludos

Carlangueitor · #3 (**permalink**) 04/10/2011, 13:17

A un input se le puede dar estilo como cualquier otro elemento, puedes cambiar el fondo en su estado normal y en hover para hacer lo que quieres.

Saludos

Reyphp · #4 (**permalink**) 04/10/2011, 17:47

eperimente con algo asi pero no me sirvio

Código HTML:

Ver original<imput type="buttom" name="NOMBRE" id="boton" />

Código CSS:

Ver original#boton { background-color: #ff0000; color: #000; padding: 5px; border: 1px solid #000 }
#boton :hover { background-color: #ffff00; color: #000; padding: 5px; border: 1px solid #000 }

alguien me dise que sale mal?

Carlangueitor · #5 (**permalink**) 04/10/2011, 17:49

¿Por qué no te sirvió? Ese código es correcto, ¿estás usando un doctype adecuado?

Saludos

Reyphp · #6 (**permalink**) 04/10/2011, 19:49

no lo se amigo se me puedes ayudar te lo agradesco aqui esta el codigo completo:

Código HTML:

Ver original<html>
<head>
<title>Boton</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input id="boton" type="submit" value="Entrar">
</body>
</html>

Código CSS:

Ver original#boton { background-color: #ff0000; color: #000; padding: 5px; border: 1px solid #000 }
#boton :hover { background-color: #ffff00; color: #000; padding: 5px; border: 1px solid #000 }

el boton se personalisa cambia a color rojo pero cuando pongo el clic ensima no susede nada

Carlangueitor · #7 (**permalink**) 04/10/2011, 20:32

Pon #boton:hover en lugar de #boton :hover (sin el espacio) y dime si te sirve.

Saludos

Reyphp · #8 (**permalink**) 07/10/2011, 16:52

si amigo sirvio solo un espacio complica todo gracias por las respuestas

Reyphp · #9 (**permalink**) 07/10/2011, 17:01

por si hay dudas y algun aprendis de html y css que nesesite el codigo yo se lo regalo es libre por si las moscas jajajaja

caricatos · #10 (**permalink**) 07/10/2011, 17:10

Hola:

Como apunte adicional, puedes poner el botón oculto y usar elementos dentro de un tag label asociado al botón...

Saludos

Reyphp · #11 (**permalink**) 08/10/2011, 14:11

Cita:

Iniciado por caricatos

Hola:

Como apunte adicional, puedes poner el botón oculto y usar elementos dentro de un tag label asociado al botón...

Saludos

???? como asi????

caricatos · #12 (**permalink**) 08/10/2011, 17:25

Hola:

Cita:

Iniciado por Reyphp

???? como asi????

En este apunte: La estética de los formularios hay algunos botones "maquillados"

...

Saludos

Reyphp · #13 (**permalink**) 09/10/2011, 13:37

Cita:

Iniciado por caricatos

Hola:

En este apunte: [URL="http://www.pepemolina.com/index.php?titulo=La+est%E9tica+de+los+formularios"]La estética de los formularios[/URL] hay algunos botones "maquillados"

...

Saludos

gracias amigo