Foros del Web » Creando para Internet » CSS »

Efecto hundido botón submit

Estas en el tema de Efecto hundido botón submit en el foro de CSS en Foros del Web. Hola, sabeís como dar el efecto hundido a los botones submit? me imagino k se la aumentará el padding izquierdo y superior del botón pero ...
  #1 (permalink)  
Antiguo 23/05/2011, 10:03
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 7 años
Puntos: 4
Efecto hundido botón submit

Hola,

sabeís como dar el efecto hundido a los botones submit? me imagino k se la aumentará el padding izquierdo y superior del botón pero la cosa es como darle ese estilo al botón pulsado y que no se aplique al resto de botones submit.

Un ejemplo es el boton de registro de facebook facebook.com/

Un saludo y gracias ;)
  #2 (permalink)  
Antiguo 24/05/2011, 05:05
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 7 meses
Puntos: 1008
Respuesta: Efecto hundido botón submit

con :hover usa la propiedad border-xxxx-style
  #3 (permalink)  
Antiguo 24/05/2011, 22:02
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 7 años
Puntos: 4
Respuesta: Efecto hundido botón submit

Gracias IsaBelM pero no busco al hover sino con el selector active. El ejemplo que puse de facebook me he dado cuenta que no lo tiene OPS!

Lo que pregunto es cuando se pulsa el botón submit se hunde tanto por su parte superior como la izquierda, es exactamente lo que hace los botones submit por defecto de los navegadores. Le he aplicado padding a esos lados pero cuando hay varios sumits se aplica a todos y no es lo deseado.
  #4 (permalink)  
Antiguo 25/05/2011, 03:48
Avatar de slide22  
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 17
Antigüedad: 5 años, 7 meses
Puntos: 0
Respuesta: Efecto hundido botón submit

Hola. Yo utilizaria un div como boton y le pondria de imagen de fondo la imagen de un boton normal y cuando este activo se cambie la imagen a la de un boton hundido
  #5 (permalink)  
Antiguo 25/05/2011, 07:04
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 6 años, 1 mes
Puntos: 13
Respuesta: Efecto hundido botón submit

Aplicale CSS al botón :hover cuando pasas por encima y/o :focus cuando oprimes, según lo que quieras.
  #6 (permalink)  
Antiguo 25/05/2011, 20:33
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 7 años
Puntos: 4
Respuesta: Efecto hundido botón submit

Cita:
Iniciado por Ventru3 Ver Mensaje
Aplicale CSS al botón :hover cuando pasas por encima y/o :focus cuando oprimes, según lo que quieras.
De esa manera el botón quedaría con el estilo del focus si se suelta el click fuera del botón y queda feo esteticamente.

Fijaos en los botones submit del foro por ejemplo, al clicarlos se hunden, eso pregunto.
  #7 (permalink)  
Antiguo 26/05/2011, 01:28
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 7 meses
Puntos: 269
Respuesta: Efecto hundido botón submit

erxaca el boton del foro no tiene estilos, estan en html pelado y toman su estilo del theme de windows supongo no se bien.

En este enlace te comparto un un boton que hice.
Esta hecho con html, css y jquery. y tiene 3 posiciones: una para cuando esta x defecto, otra para el hover y otra para cuando hacemos click. Esta última es la que te interesa a vos.
Además vas a ver que está hecho con un sprite, si queres un efecto hundido solo entra en photoshop y crea una sombra para no andar lidiando con propiedades css3 que por muy cool que sean no son soportadas por versiones viejas de ie, tal es el caso de box-shadow. Allá tu con tu elección.

Espero te sea útil, cualquier cosita que no entiendas bien solo pregunta, pero por favor si la pregunta se relaciona con los sprites ahi tienes un link, léelo antes.

Espero te sirva. Saludos.

Edito: si bien en el ejemplo vas a ver que trabajamos el boton sobre un div, tranquilamente puedes pasarlo a un <input type="button"> nada mas asegurate de resetear los estilos que trae por defecto y ponerle display:block; para que se convierta en elemento de bloque.

Última edición por cristian_cena; 26/05/2011 a las 01:43
  #8 (permalink)  
Antiguo 26/05/2011, 07:23
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 7 meses
Puntos: 1008
Respuesta: Efecto hundido botón submit

cristian_cena, si realmente es eso lo que quería, no es necesario usar jquery. para eso está la pseudo clase :onfocus, que vendría a sustituir al evento oncclick
  #9 (permalink)  
Antiguo 01/06/2011, 19:52
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 7 años
Puntos: 4
Respuesta: Efecto hundido botón submit

Hola cristian_cena,

el estilo del botón por defecto lo generá el navegador que se este usando.

Gracias por tu tuto pero no es lo que busco, una vez mas, lo que busco es exactamente el efecto que hace el botón submit pero defecto del navegador, al pinchar sobre el se "hunde" el texto del botón. Con padding con el selector focus no vale porque se aplica a todos los submit si hubiera varios juntos.

Saluds
  #10 (permalink)  
Antiguo 01/06/2011, 21:44
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 7 meses
Puntos: 269
Respuesta: Efecto hundido botón submit

Cita:
Iniciado por erxaca Ver Mensaje
Hola cristian_cena,
Con padding con el selector focus no vale porque se aplica a todos los submit si hubiera varios juntos.
Saluds
usa una id o una class para los submit que necesites.
La verdad amigo, es que en mi opinión los estilos por defecto son horribles y por eso trabaje de ese modo. Pero si a ti te gustan, haya usted con eso.

Cualquier cosa ya sabes, puedes usar lo que indica isabel.

Saludos.
  #11 (permalink)  
Antiguo 02/06/2011, 11:23
 
Fecha de Ingreso: enero-2010
Mensajes: 389
Antigüedad: 7 años
Puntos: 4
Respuesta: Efecto hundido botón submit

en ese caso la solución sería aplicarle un class mejormente al hacer onclick sobre el botón y quitarlo al onblur.

La cosa es obtener el efecto hundido, no el diseño cristian_cena.
  #12 (permalink)  
Antiguo 02/06/2011, 11:37
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 7 meses
Puntos: 269
Respuesta: Efecto hundido botón submit

Cita:
Iniciado por erxaca Ver Mensaje
en ese caso la solución sería aplicarle un class mejormente al hacer onclick sobre el botón y quitarlo al onblur.
Sobre el elemento, o sobre una clase que pones/quitas según el evento, lo que haces es dar estilos de todos modos .

Si tienes una solución mejor pues pon el código, así no discutimos en el aire.

Abrazo.

Etiquetas: efecto, submit
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:23.