Foros del Web » Creando para Internet » HTML »

css en botones

Estas en el tema de css en botones en el foro de HTML en Foros del Web. hola: tengo el siguiente problema... tengo unas paginas con una hoja de estilo css, y tengo en el estilo espeficadas todas las etiquetas INPUT de ...
  #1 (permalink)  
Antiguo 21/12/2002, 12:12
 
Fecha de Ingreso: noviembre-2002
Mensajes: 37
Antigüedad: 15 años, 1 mes
Puntos: 0
css en botones

hola:
tengo el siguiente problema...
tengo unas paginas con una hoja de estilo css, y tengo en el estilo espeficadas todas las etiquetas INPUT de la forma:

INPUT: {
propiedad: valor;

}

el problema es q tengo que hacer que los botones tengan algo especial, que al situarse sobre ellos cambie el cursor (cursor: hand)...

Alguien sabe como hacer para ocupar la misma hoja de estilo sin necesidad de crear una clase aparte, la idea es dejar las paginas tal cual, no modificarlas...

De antemano, gracias...
  #2 (permalink)  
Antiguo 21/12/2002, 12:32
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola, vassk7.

Yo creo que lo mejor es que pongas todos tus estilos en un archivo aparte llamado, por ejemplo, hoja_de_estilo.css, y que luego en cada página pongas entre <head> y </head> esto:

<LINK REL="stylesheet" HREF="hoja_de_estilo.css" TYPE="text/css">

De esta forma cuando quieras modificar algo de los estilos, cambias el archivo .css y todas las páginas reflejarán los cambios sin que tengas que tocarlas para nada.

Espero que esto aclare tu duda. Saludos,
  #3 (permalink)  
Antiguo 21/12/2002, 12:56
Avatar de Kunael  
Fecha de Ingreso: noviembre-2002
Ubicación: Barcelona
Mensajes: 164
Antigüedad: 15 años, 1 mes
Puntos: 0
Hola:

Bueno, ante todo debemos considerar un aspecto

Cita:
sin necesidad de crear una clase aparte, la idea es dejar las paginas tal cual, no modificarlas...
A mi humilde entender, si quieres crear un efecto en el cursor, tendrás que modificar a la fuerza el cíodigo, ya que los efectos no salen de la nada ¿no? Luego entonces se trata de que la modificación sea mínima y poco costosa.

Lo que te ha comentado JavierB sería quizá una opción costosa a corto plazo pero muy muy beneficiosa a medio y largo plazo. De hecho, si tuvieras todos los estilos agrupados en un fichero CSS exterior, tan sólo creando poquísimo código, se te modificarían todos los INPUTS del site.

Respecto a la modificación del aspecto de los cursores, mírate esta referencia: http://www.echoecho.com/csscursors.htm. Fíjate que sólo IE 4+ o Nescape Navigator 6+ implementan este efecto. Tenlo en cuenta también.

Espero haber sido de ayuda. Salu2
__________________
Comparte tu conocimiento
  #4 (permalink)  
Antiguo 22/12/2002, 04:58
Avatar de pako  
Fecha de Ingreso: diciembre-2001
Ubicación: Mexico D.F.
Mensajes: 944
Antigüedad: 16 años
Puntos: 0
Fijate en la beta de mis foros y me dices si quieres algo asi.
A solo funcina con IE5.5 o superior Nescape Navigator 6+ y creo que con la ultima verción de opera.
Verifica todos los INPUT del sitioSITIO
De hecho le puedo cambiar el cursor casi a todo.
  #5 (permalink)  
Antiguo 22/12/2002, 05:05
Avatar de pako  
Fecha de Ingreso: diciembre-2001
Ubicación: Mexico D.F.
Mensajes: 944
Antigüedad: 16 años
Puntos: 0
A se me olvidava si quieres un cursor para XP o win9x 2k etc... del color forma o diseño 3d que quieras; Te lo diseño.
Tambien iconos.
  #6 (permalink)  
Antiguo 26/12/2002, 08:11
 
Fecha de Ingreso: noviembre-2002
Mensajes: 37
Antigüedad: 15 años, 1 mes
Puntos: 0
gracias !!

Muchas gracias por sus aportes !!
ahora bien, tengo que aclarar que efectivamente los estilos los tengo en un archivo .css
y es en el archivos donde he tratado de introducir algo para que los botones tengan el cursor distinto...
como les mensione antes, tengo la etiqueta input con un estilo, pero necesito que solo los botones tengan el cursor 'hand' cuando me situe sobre ellos. El problema radica principalmente en saber que instruccion me permite referirme a los botones en la etiqueta INPUT...
he tratado lo siguiente (todo lo anterior en el archivo .css)

input[type:button] {
cursor: hand;
}

input, select, textarea {
background-color : #F0FFFF;
color: Navy;
border-bottom : 1px solid #5885F3;
border-left : 1px solid #5885F3;
border-right : 1px solid #5885F3;
border-top : 1px solid #5885F3;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
}

pero no me funciona...

Se me olvidaba ...
Excelente foro pako !!!

Saludos y gracias por los aportes...
C ya.

Última edición por vassk7; 26/12/2002 a las 08:29
  #7 (permalink)  
Antiguo 26/12/2002, 18:00
Avatar de pako  
Fecha de Ingreso: diciembre-2001
Ubicación: Mexico D.F.
Mensajes: 944
Antigüedad: 16 años
Puntos: 0
Guarda lo siguiente como html y estudialo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cambia cursor</title>
<style type="text/css">
<!--
body {
BACKGROUND-COLOR: #aaaaaa;
SCROLLBAR-FACE-COLOR: #dedede;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #dddddd;
SCROLLBAR-3DLIGHT-COLOR: #e2e2e2;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #efefef;
SCROLLBAR-DARKSHADOW-COLOR: #98aab1;
FONT-FAMILY: "Small Fonts", VT100, Arial, Helvetica, sans-serif;
TEXT-TRANSFORM: uppercase;
FONT-SIZE: 10px;

}
a:link,a:active,a:visited {
COLOR : #666666;
}
a:hover {
FONT: bold normal 9px "Small Fonts", VT100, Arial, Helvetica, sans-serif;
TEXT-DECORATION: underline;
COLOR : #A2A2A2;
}

input.button {
BACKGROUND-COLOR: #CCCCCC;
BORDER-BOTTOM-COLOR: #666666;
BORDER-BOTTOM-WIDTH: 1px;
BORDER-LEFT-COLOR: #EEEEEE;
BORDER-LEFT-WIDTH: 1px;
BORDER-RIGHT-COLOR: #000000;
BORDER-RIGHT-WIDTH: 1px;
BORDER-TOP-COLOR: #BBBBBB;
BORDER-TOP-WIDTH: 1px;
FONT: normal 9px Small Fonts, VT100, Arial, Helvetica, sans-serif;
TEXT-TRANSFORM: uppercase;
COLOR: #666666;
CURSOR: hand;

}
input.texto {
BACKGROUND-COLOR: #CCCCCC;
BORDER-BOTTOM-COLOR: #666666;
BORDER-BOTTOM-WIDTH: 1px;
BORDER-LEFT-COLOR: #EEEEEE;
BORDER-LEFT-WIDTH: 1px;
BORDER-RIGHT-COLOR: #000000;
BORDER-RIGHT-WIDTH: 1px;
BORDER-TOP-COLOR: #BBBBBB;
BORDER-TOP-WIDTH: 1px;
FONT: normal 9px Small Fonts, VT100, Arial, Helvetica, sans-serif;
TEXT-TRANSFORM: uppercase;
COLOR: #666666;
CURSOR: text;

}
input.radio{
CURSOR: hand;

}
input.checkbox{
CURSOR: hand;
}
-->
</style>
</head>
<body>
<table><tr><td><font face="Arial" size="3">
<form name="formulario" action="destino.php" method="post"onsubmit="return comprueba()">
Checkbox<input class="checkbox" type="checkbox" name="radio"><br>
Radio<input class="radio" type="radio" name="radio"><br>
Texto<input class="texto" type="text" name="texto" maxlength="12"><br>
Boton<input class="button"type="submit" value="confirmar"><br>
</form></td></tr></font></table>
<pre>
<b>Tipos de cursores</b>
cursor: auto (utiliza un cursor dado por el usuario)
cursor: crosshair (el cursor se convierte en una cruz)
cursor: default (el cursor permanece como es siempre)
cursor: e-resize (una flecha que apunta a la derecha)
cursor: hand (la tradicional mano)
cursor: help (el signo de pregunta)
cursor: move (una cruz con flechas en los extremos)
cursor: n-resize (una flecha apuntando hacia arriba o hacia el norte)
cursor: ne-resize (una flecha apuntando hacia el noreste)
cursor: nw-resize (una flecha que apunta hacia el noroeste)
cursor: pointer (nuevamente el puntero)
cursor: s-resize (una flecha que apunta hacia abajo o al sur)
cursor: se-resize (una flecha que apunta hacia el sudeste)
cursor: sw-resize (una flecha que apunta hacia el sudoeste)
cursor: text (se muestra como el fin de un I-beam)
cursor: w-resize (una flecha apuntando hacia el oeste o hacia la izquierda)
cursor: wait (un reloj de arena)
</pre>
<pre>
Y para llamar un cursor externo
CURSOR:url(.cursores/cursor.ani);

Y sin estilo predefinido seria asi
<a href="www.pagina.com" onMouseOver="this.style.cursor='hand'">Enlace</a>

<a href="www.pagina.com" onMouseOver="this.style.cursor='wait'"><img src="ninguna.gif" border="1"></a>

<table><tr><td><font face="Arial" size="3">
<form name="formulario" action="destino.php" method="post"onsubmit="return comprueba()">
Checkbox<input onMouseOver="this.style.cursor='help'" type="checkbox" name="radio"><br>
Radio<input onMouseOver="this.style.cursor='move'" type="radio" name="radio"><br>
Texto<input onMouseOver="this.style.cursor='crosshair'" type="text" name="texto" maxlength="12"><br>
Boton<input onMouseOver="this.style.cursor='hand'" type="submit" value="confirmar"><br>
</form></td></tr></font></table>
</pre>
</body>
</html>
  #8 (permalink)  
Antiguo 27/12/2002, 00:27
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola vassk7:

Las manitas en netscape son "pointer", o sea que el que vea la página desde netscape, no va a ver la dichosa mano.
Una de las formas de poner la mano es que esté en una etiqueta <a>, y luego modificar el estilo de las propiedades :hover o :visit...
Otra manera es cambiarlo con un script:
... elemento.style.cursor = (document.all) ? "hand" : "pointer";

Tengo entendido que se puede usar en el estilo los dos valores, y el browser aplicaría el primero que conoce:
#enlace: hand pointer;

Otra cosa que se me está ocurriendo es usar el evento onmouseover:
onmouseover="this.style.cursor=mano";
... habiendo definido mano en la cabecera como:
var mano = (document.all) ? "hand":"pointer";

Espero que te sirva...

Saludos
  #9 (permalink)  
Antiguo 28/12/2002, 18:42
Avatar de chalito  
Fecha de Ingreso: diciembre-2002
Ubicación: Santiago, chile
Mensajes: 221
Antigüedad: 15 años
Puntos: 0
a mi parecer la mejor manera de solucionar este problemas es agregar los atrivutos que faltan directamente con la etiqueta style dentro del codigo html que deaseas cambiar, en este caso

<input type=submit value=Enviar style="estilos que falta declarar">

de esta manera podras solucionar facilmente tu problema sin tener que cambiar los estilos CSS ya definidos

Saludos
  #10 (permalink)  
Antiguo 29/12/2002, 06:58
 
Fecha de Ingreso: noviembre-2002
Mensajes: 37
Antigüedad: 15 años, 1 mes
Puntos: 0
Gracias

Gracias por las respuestas y aportes. Lo que finalmente hice fue incluir dentro de cada "INPUT type='button'" el atributo class, con una clase especial para los botones. con todas las caracteristicas especiales con respecto a el resto de los input.

Saludos
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:53.