Foros del Web » Creando para Internet » CSS »

como personalisar el boton imput html en css

Estas en el tema de como personalisar el boton imput html en css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/10/2011, 21:14
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 10 años, 5 meses
Puntos: 1
como personalisar el boton imput html en css

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
  #2 (permalink)  
Antiguo 03/10/2011, 22:50
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 11 años, 4 meses
Puntos: 63
Respuesta: como personalisar el boton imput html en css

De este modo podrias

Código HTML:
Ver original
  1. <input type="button" class="boton" value="personalizado" />

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

Saludos
  #3 (permalink)  
Antiguo 04/10/2011, 13:17
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 13 años, 10 meses
Puntos: 1329
Respuesta: como personalisar el boton imput html en css

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
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 04/10/2011, 17:47
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: como personalisar el boton imput html en css

eperimente con algo asi pero no me sirvio

Código HTML:
Ver original
  1. <imput type="buttom" name="NOMBRE" id="boton" />

Código CSS:
Ver original
  1. #boton { background-color: #ff0000; color: #000; padding: 5px; border: 1px solid #000 }
  2. #boton :hover { background-color: #ffff00; color: #000; padding: 5px; border: 1px solid #000 }

alguien me dise que sale mal?
  #5 (permalink)  
Antiguo 04/10/2011, 17:49
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 13 años, 10 meses
Puntos: 1329
Respuesta: como personalisar el boton imput html en css

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

Saludos
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 04/10/2011, 19:49
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: como personalisar el boton imput html en css

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

Código HTML:
Ver original
  1. <title>Boton</title>
  2. <link href="css.css" rel="stylesheet" type="text/css" />
  3. </head>
  4. <input id="boton" type="submit" value="Entrar">
  5. </body>
  6. </html>

Código CSS:
Ver original
  1. #boton { background-color: #ff0000; color: #000; padding: 5px; border: 1px solid #000 }
  2. #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
  #7 (permalink)  
Antiguo 04/10/2011, 20:32
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 13 años, 10 meses
Puntos: 1329
Respuesta: como personalisar el boton imput html en css

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

Saludos
__________________
Grupo Telegram Docker en Español
  #8 (permalink)  
Antiguo 07/10/2011, 16:52
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: como personalisar el boton imput html en css

si amigo sirvio solo un espacio complica todo gracias por las respuestas
  #9 (permalink)  
Antiguo 07/10/2011, 17:01
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: como personalisar el boton imput html en css

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
  #10 (permalink)  
Antiguo 07/10/2011, 17:10
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 19 años, 9 meses
Puntos: 1284
Respuesta: como personalisar el boton imput html en css

Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 08/10/2011, 14:11
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: como personalisar el boton imput html en css

Cita:
Iniciado por caricatos Ver Mensaje
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????
  #12 (permalink)  
Antiguo 08/10/2011, 17:25
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 19 años, 9 meses
Puntos: 1284
Respuesta: como personalisar el boton imput html en css

Hola:

Cita:
Iniciado por Reyphp Ver Mensaje
???? como asi????
En este apunte: La estética de los formularios hay algunos botones "maquillados" ...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 09/10/2011, 13:37
 
Fecha de Ingreso: agosto-2011
Mensajes: 39
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: como personalisar el boton imput html en css

Cita:
Iniciado por caricatos Ver Mensaje
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

Etiquetas: html, imput, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:35.