Foros del Web » Creando para Internet » CSS »

que el boton se unda

Estas en el tema de que el boton se unda en el foro de CSS en Foros del Web. hola me podrian ayudar con esto? quiero que mi boton, al presionarlo se unda si puede serrrrrr gracias...
  #1 (permalink)  
Antiguo 30/07/2011, 18:32
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Exclamación que el boton se unda

hola me podrian ayudar con esto?

quiero que mi boton, al presionarlo se unda

si puede serrrrrr

gracias
  #2 (permalink)  
Antiguo 30/07/2011, 19:08
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 1 mes
Puntos: 306
Respuesta: que el boton se unda

Y que código estas usando?
muestra el codigo que tienes hasta el momento.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 30/07/2011, 20:45
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 8 meses
Puntos: 1567
Respuesta: que el boton se unda

Un par de ladrillos encima?...
o

.boton {
border: outset 1px #ccc;
}

.boton:hover {
border: inset 1px #ccc;
}

Si querés que sea al presionar el botón, tenes que definir el estilo con javascript en un evento onclick

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 30/07/2011, 22:11
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: que el boton se unda

gracias por sus respuestas pero soy muy novato en css y todo eso

este codigo uso yo

<input type="image" vspace="0" hspace="5" border="0" src="register2.png" id="submit"/>

saludo
  #5 (permalink)  
Antiguo 31/07/2011, 05:24
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 11 años
Puntos: 3
Respuesta: que el boton se unda

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. <!--
  7. .boton {
  8. border: outset 1px #ccc;
  9. }
  10.  
  11. .boton:hover {
  12. border: inset 1px #ccc;
  13. }
  14.  
  15. -->
  16. </head>
  17.  
  18. <input class="boton" type="image" vspace="0" hspace="5" border="0" src="register2.png" id="submit"/>
  19. </body>
  20. </html>

aca tenes el codigo armado saludos
  #6 (permalink)  
Antiguo 31/07/2011, 09:39
Avatar de Alucine  
Fecha de Ingreso: abril-2011
Mensajes: 59
Antigüedad: 5 años, 11 meses
Puntos: 10
Respuesta: que el boton se unda

perdon la intromisión, pero las propiedades "border:inset" y "border:outset" son de css3?
gracias ::)
  #7 (permalink)  
Antiguo 31/07/2011, 10:52
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 8 meses
Puntos: 1567
Respuesta: que el boton se unda

Esos valores corresponden a la propiedad border-style, y están por lo menos desde css2, y en versiones anteriores creo que tambien


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 31/07/2011, 12:00
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: que el boton se unda

mmm aver aver, el codigo que me pasaste, te lo agradesco mucho

es que cuando paso el mouse se presiona solo, pero yo no queria eso, taba buscando qe al presionarlo se unda solamente

se agradece de todas formas :D
  #9 (permalink)  
Antiguo 31/07/2011, 17:31
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: que el boton se unda

alguna otra ayuda?
  #10 (permalink)  
Antiguo 31/07/2011, 17:42
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 11 años
Puntos: 3
Respuesta: que el boton se unda

Cita:
Iniciado por polarubi Ver Mensaje
alguna otra ayuda?

tienes que leer un poco el codigo, yo lo puse hover, pero si "active" como hice es cuando clickeas

<style type="text/css">
<!--
.boton {
border: outset 1px #ccc;
}

.boton:active {
border: inset 1px #ccc;
}
*
-->
</style>


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. <!--
  7. .boton {
  8. border: outset 1px #ccc;
  9. }
  10.  
  11. .boton:active {
  12. border: inset 1px #ccc;
  13. }
  14. *
  15. -->
  16. </head>
  17. *
  18. <input class="boton" type="image" vspace="0" hspace="5" border="0" src="images/d1.png" id="submit"/>
  19. </body>
  20. </html>
  #11 (permalink)  
Antiguo 31/07/2011, 21:42
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: que el boton se unda

lo siento pero no sirve, no puedo hacerlo funcionar :S
  #12 (permalink)  
Antiguo 01/08/2011, 03:20
Avatar de ThunderWolf  
Fecha de Ingreso: julio-2011
Mensajes: 30
Antigüedad: 5 años, 8 meses
Puntos: 1
Respuesta: que el boton se unda

A ver si te sirve este...

Dentro de <style type="text/css">...</style> , en <head>:

CSS
Código:
.InputBotonNormal {
	font-family: Arial Black, Arial;
	font-weight: 900;
	text-align: center;
	width: 240px;
	border-width: 5px;
	border-style: outset;
}
.InputBotonClick {
	font-family: Arial Black, Arial;
	font-weight: 900;
	border-width: 5px;
	border-style: inset;
	background-color: #FFFF00;
	text-align: center;
	width: 240px;
}
.InputBotonOver {
	font-family: Arial Black, Arial;
	font-weight: 900;
	border-width: 5px;
	border-style: outset;
	text-align: center;
	background-color: #00FF00;
	width: 240px;
}
Dentro de <form>...</form>, en <body>:

HTML
Código:
<input type="button" 
class="InputBotonNormal" 
value="Clickeame"  
onmousedown = "this.className='InputBotonClick'" 
onmouseup = "this.className='InputBotonNormal'" 
onmouseover = "this.className='InputBotonOver'" 
onmouseout = "this.className='InputBotonNormal'">

Última edición por ThunderWolf; 01/08/2011 a las 03:34 Razón: Corrección error de sintaxis
  #13 (permalink)  
Antiguo 01/08/2011, 05:00
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 11 años
Puntos: 3
Respuesta: que el boton se unda

Cita:
Iniciado por polarubi Ver Mensaje
lo siento pero no sirve, no puedo hacerlo funcionar :S
anda perfectamente el codigo que te pase yo lo esube usando...
lo estas aplicando bien?
  #14 (permalink)  
Antiguo 01/08/2011, 14:39
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: que el boton se unda

Cita:
Iniciado por ThunderWolf Ver Mensaje
A ver si te sirve este...

Dentro de <style type="text/css">...</style> , en <head>:

CSS
Código:
.InputBotonNormal {
	font-family: Arial Black, Arial;
	font-weight: 900;
	text-align: center;
	width: 240px;
	border-width: 5px;
	border-style: outset;
}
.InputBotonClick {
	font-family: Arial Black, Arial;
	font-weight: 900;
	border-width: 5px;
	border-style: inset;
	background-color: #FFFF00;
	text-align: center;
	width: 240px;
}
.InputBotonOver {
	font-family: Arial Black, Arial;
	font-weight: 900;
	border-width: 5px;
	border-style: outset;
	text-align: center;
	background-color: #00FF00;
	width: 240px;
}
Dentro de <form>...</form>, en <body>:

HTML
Código:
<input type="button" 
class="InputBotonNormal" 
value="Clickeame"  
onmousedown = "this.className='InputBotonClick'" 
onmouseup = "this.className='InputBotonNormal'" 
onmouseover = "this.className='InputBotonOver'" 
onmouseout = "this.className='InputBotonNormal'">
claro eso es exactamente lo que nesecito, pero como pongo mi imagen? saludos
  #15 (permalink)  
Antiguo 01/08/2011, 15:26
Avatar de Alvaro_Franz  
Fecha de Ingreso: mayo-2011
Mensajes: 84
Antigüedad: 5 años, 10 meses
Puntos: 4
Respuesta: que el boton se unda

Cita:
Iniciado por polarubi Ver Mensaje
claro eso es exactamente lo que nesecito, pero como pongo mi imagen? saludos
Por favor, escribe bien si necesitas un favor...

Para que el botón sea una imagen quítale el value y ponle un src="URL-de-tu-imagen".

Cómo hacerlo: http://blog.controlzeta.net/?tag=ima...n-input-submit

Buscando en internet.
__________________
La verdadera libertad consiste en dominarse a uno mismo
  #16 (permalink)  
Antiguo 01/08/2011, 19:17
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: que el boton se unda

Cita:
Iniciado por Alvaro_Franz Ver Mensaje
Por favor, escribe bien si necesitas un favor...

Para que el botón sea una imagen quítale el value y ponle un src="URL-de-tu-imagen".

Cómo hacerlo: http://blog.controlzeta.net/?tag=ima...n-input-submit

Buscando en internet.
muy bueno tu codigo, podria ser que solamente quede la imagen y no los marcos de alrededor, para que solamente se unda el boton?

muchas gracias, agradesco todas sus ayudas

aca una muestra de como me qedo

Última edición por polarubi; 01/08/2011 a las 21:00
  #17 (permalink)  
Antiguo 02/08/2011, 00:36
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: que el boton se unda

Dale un valor de 0px a su border.
  #18 (permalink)  
Antiguo 02/08/2011, 01:20
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: que el boton se unda

Cita:
Iniciado por Batan Ver Mensaje
Dale un valor de 0px a su border.
la verdad que no se bien como hacerlo por que soy nuevo en esto, tal vez vos ves algo mal en el codigo, ahy te lo muestro

Código HTML:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin t&iacute;tulo</title>
    <style type="text/css">
    <!--
.InputBotonNormal {
	font-family: Arial Black, Arial;
	font-weight: 900;
	text-align: center;
	width: 240px;
	border-width: 5px;
	border-style: outset;
}
.InputBotonClick {
	font-family: Arial Black, Arial;
	font-weight: 900;
	border-width: 5px;
	border-style: inset;
	background-color: #FFFF00;
	text-align: center;
	width: 240px;
}
.InputBotonOver {
	font-family: Arial Black, Arial;
	font-weight: 900;
	border-width: 5px;
	border-style: outset;
	text-align: center;
	background-color: #00FF00;
	width: 240px;
}
    -->
    </style>
    </head>
    *
    <body>
<form>
  <input type="image" 
class="InputBotonNormal" 
src="http://www.argewarez.com/img/ingresar.png"
onmousedown = "this.className='InputBotonClick'" 
onmouseup = "this.className='InputBotonNormal'" 
onmouseover = "this.className='InputBotonOver'" 
onmouseout = "this.className='InputBotonNormal'">
</form>
    </body>
    </html> 
agradesco tu ayuda =)
  #19 (permalink)  
Antiguo 02/08/2011, 01:24
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: que el boton se unda

Código HTML:
Ver original
  1. <input type="image"
  2. class="InputBotonNormal"
  3. src="http://www.argewarez.com/img/ingresar.png"
  4. onmousedown = "this.className='InputBotonClick'"
  5. onmouseup = "this.className='InputBotonNormal'"
  6. onmouseover = "this.className='InputBotonOver'"
  7. onmouseout = "this.className='InputBotonNormal'" border="0" />
  #20 (permalink)  
Antiguo 02/08/2011, 03:07
Avatar de Alvaro_Franz  
Fecha de Ingreso: mayo-2011
Mensajes: 84
Antigüedad: 5 años, 10 meses
Puntos: 4
Respuesta: que el boton se unda

Cita:
Iniciado por Batan Ver Mensaje
Dale un valor de 0px a su border.
Es una idea lógica lo que dices, pero el problema es que aquí se ha planteado el efecto "hundimiento" con un cambio en el estilo de borde. Si le quitamos el borde, desaparecerá por completo el estilo, y estamos en las mismas.

Puedes hacerlo de la siguiente manera.

Crea una imagen con el ancho del botón y con el alto doble, de modo que quepan DOS botones justos...

Luego, en el CSS quita las propiedades de borde y ponle unas de background a tu botón.

En la que tenía efecto activo, desplázale el fondo hacia arriba, para que se vea la segunda imagen...

Así:


.InputBotonNormal {
font-family: Arial Black, Arial;
font-weight: 900;
text-align: center;
width: 240px;
BACKGROUND-IMAGE:url('BOTON');
BACKGROUND-POSITION:0px 0px;
}

.InputBotonClick {
font-family: Arial Black, Arial;
font-weight: 900;
BACKGROUND-IMAGE:url('BOTON');
BACKGROUND-POSITION:0px MITAD DE ALTOpx;

width: 240px;
}

.InputBotonOver {
font-family: Arial Black, Arial;
font-weight: 900;

BACKGROUND-IMAGE:url('BOTON');
BACKGROUND-POSITION:0px MITAD DE ALTOpx;
text-align: center;
background-color: #00FF00;
width: 240px;
}


Te lo dejo ahí para que investigues. Un saludo.
__________________
La verdadera libertad consiste en dominarse a uno mismo
  #21 (permalink)  
Antiguo 02/08/2011, 03:51
Avatar de polarubi  
Fecha de Ingreso: noviembre-2008
Mensajes: 243
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: que el boton se unda

Cita:
Iniciado por Alvaro_Franz Ver Mensaje
Es una idea lógica lo que dices, pero el problema es que aquí se ha planteado el efecto "hundimiento" con un cambio en el estilo de borde. Si le quitamos el borde, desaparecerá por completo el estilo, y estamos en las mismas.

Puedes hacerlo de la siguiente manera.

Crea una imagen con el ancho del botón y con el alto doble, de modo que quepan DOS botones justos...

Luego, en el CSS quita las propiedades de borde y ponle unas de background a tu botón.

En la que tenía efecto activo, desplázale el fondo hacia arriba, para que se vea la segunda imagen...

Así:


.InputBotonNormal {
font-family: Arial Black, Arial;
font-weight: 900;
text-align: center;
width: 240px;
BACKGROUND-IMAGE:url('BOTON');
BACKGROUND-POSITION:0px 0px;
}

.InputBotonClick {
font-family: Arial Black, Arial;
font-weight: 900;
BACKGROUND-IMAGE:url('BOTON');
BACKGROUND-POSITION:0px MITAD DE ALTOpx;

width: 240px;
}

.InputBotonOver {
font-family: Arial Black, Arial;
font-weight: 900;

BACKGROUND-IMAGE:url('BOTON');
BACKGROUND-POSITION:0px MITAD DE ALTOpx;
text-align: center;
background-color: #00FF00;
width: 240px;
}


Te lo dejo ahí para que investigues. Un saludo.
ok muchas gracias lo investigare =)
  #22 (permalink)  
Antiguo 02/08/2011, 10:05
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 11 años
Puntos: 3
Respuesta: que el boton se unda

si le das valor 0 le estas acando el efecto :S como dice alvaro franz
  #23 (permalink)  
Antiguo 03/08/2011, 01:06
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: que el boton se unda

Yo respondi rápido no vi que la funcion llamase a un javascript.

Etiquetas: 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 20:10.