que el boton se unda

polarubi · #1 (**permalink**) 30/07/2011, 18:32

hola me podrian ayudar con esto?

quiero que mi boton, al presionarlo se unda

si puede serrrrrr

gracias

C2am · #2 (**permalink**) 30/07/2011, 19:08

Y que código estas usando?
muestra el codigo que tienes hasta el momento.

emprear · #3 (**permalink**) 30/07/2011, 20:45

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

polarubi · #4 (**permalink**) 30/07/2011, 22:11

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

infiero · #5 (**permalink**) 31/07/2011, 05:24

Código HTML:

Ver original<!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">
<!--
.boton {
border: outset 1px #ccc;
}
 
.boton:hover {
border: inset 1px #ccc;
}
 
-->
</style>
</head>
 
<body>
<input class="boton" type="image" vspace="0" hspace="5" border="0" src="register2.png" id="submit"/>
</body>
</html>

aca tenes el codigo armado saludos

Alucine · #6 (**permalink**) 31/07/2011, 09:39

perdon la intromisión, pero las propiedades "border:inset" y "border:outset" son de css3?
gracias ::)

emprear · #7 (**permalink**) 31/07/2011, 10:52

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

Saludos

polarubi · #8 (**permalink**) 31/07/2011, 12:00

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

polarubi · #9 (**permalink**) 31/07/2011, 17:31

alguna otra ayuda?

infiero · #10 (**permalink**) 31/07/2011, 17:42

Cita:

Iniciado por polarubi

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">

</style>

Código HTML:

Ver original<!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">
<!--
.boton {
border: outset 1px #ccc;
}
 
.boton:active {
border: inset 1px #ccc;
}
*
-->
</style>
</head>
*
<body>
<input class="boton" type="image" vspace="0" hspace="5" border="0" src="images/d1.png" id="submit"/>
</body>
</html>

polarubi · #11 (**permalink**) 31/07/2011, 21:42

lo siento pero no sirve, no puedo hacerlo funcionar :S

ThunderWolf · #12 (**permalink**) 01/08/2011, 03:20

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'">

infiero · #13 (**permalink**) 01/08/2011, 05:00

Cita:

Iniciado por polarubi

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?

polarubi · #14 (**permalink**) 01/08/2011, 14:39

Cita:

Iniciado por ThunderWolf

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

Alvaro_Franz · #15 (**permalink**) 01/08/2011, 15:26

Cita:

Iniciado por polarubi

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.

polarubi · #16 (**permalink**) 01/08/2011, 19:17

Cita:

Iniciado por Alvaro_Franz

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

Batan · #17 (**permalink**) 02/08/2011, 00:36

Dale un valor de 0px a su border.

polarubi · #18 (**permalink**) 02/08/2011, 01:20

Cita:

Iniciado por Batan

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

Batan · #19 (**permalink**) 02/08/2011, 01:24

Código HTML:

Ver original<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'" border="0" />

Alvaro_Franz · #20 (**permalink**) 02/08/2011, 03:07

Cita:

Iniciado por Batan

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.

polarubi · #21 (**permalink**) 02/08/2011, 03:51

Cita:

Iniciado por Alvaro_Franz

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

infiero · #22 (**permalink**) 02/08/2011, 10:05

si le das valor 0 le estas acando el efecto :S como dice alvaro franz

Batan · #23 (**permalink**) 03/08/2011, 01:06

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