Efecto hundido botón submit

[erxaca]

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 ;)

[IsaBelM]

con :hover usa la propiedad border-xxxx-style

[erxaca]

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.

[slide22]

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

[Ventru3]

Aplicale CSS al botón :hover cuando pasas por encima y/o :focus cuando oprimes, según lo que quieras.

[erxaca]

Iniciado por Ventru3

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.

[cristian_cena]

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.

[IsaBelM]

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

[erxaca]

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

[cristian_cena]

Iniciado por erxaca

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.

[erxaca]

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.

[cristian_cena]

Iniciado por erxaca

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.