Foros del Web » Creando para Internet » HTML »

Botones tipicos con cabeza de flecha

Estas en el tema de Botones tipicos con cabeza de flecha en el foro de HTML en Foros del Web. Hola a todos...!!! Sabe alguien como es la sintaxis para crear los botones tipicos con cabeza de flecha hacia derecha, izquierda, arriba, ó abajo? Desde ...
  #1 (permalink)  
Antiguo 10/10/2005, 17:33
 
Fecha de Ingreso: octubre-2004
Mensajes: 708
Antigüedad: 12 años, 2 meses
Puntos: 3
Botones tipicos con cabeza de flecha

Hola a todos...!!!
Sabe alguien como es la sintaxis para crear los botones tipicos con cabeza de flecha hacia derecha, izquierda, arriba, ó abajo?
Desde ya muchas gracias y un saludo grande!!!
Paul.-
  #2 (permalink)  
Antiguo 10/10/2005, 18:58
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 11 años, 11 meses
Puntos: 0
¿Sintáxis? Con html no se pueden crear imágenes, sí podés insertarlas en el documento usando el tag <img>.
Si los querés crear dinamicamente podés usar un lenguaje del lado del servidor como PHP, pero en este caso lo más práctico sería hacerlos con un editor de imágenes, o tomar algunos de otros sitios, siempre que lo permitan, claro está.

Suerte
Fede
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #3 (permalink)  
Antiguo 10/10/2005, 19:30
 
Fecha de Ingreso: octubre-2004
Mensajes: 708
Antigüedad: 12 años, 2 meses
Puntos: 3
Pero... por ejemplo, con esto creamos un boton:
<form action="../../buscador.htm">
<input class="button" type="submit" value="abc... Buscar">
</form>
Con algo parecido, no se pueden crear eso botones con cabeza de fleta para ir hacia adelante o hacia atrás?
Gracias nuevamente!!!
  #4 (permalink)  
Antiguo 10/10/2005, 23:23
Avatar de vpereyra  
Fecha de Ingreso: septiembre-2004
Ubicación: Lima, Peru
Mensajes: 374
Antigüedad: 12 años, 4 meses
Puntos: 0
te refieres a esto?

<form action="../../buscador.htm">
<input class="button" type="submit" value=">>">
</form>
__________________
Victor Pereyra
  #5 (permalink)  
Antiguo 10/10/2005, 23:36
 
Fecha de Ingreso: octubre-2004
Mensajes: 708
Antigüedad: 12 años, 2 meses
Puntos: 3
Gracias vpereyra...
Si, seria asi pero la cabeza de flecha es un tringulo negro con una ralla detrás, se ve mucho en los programas y demás con dirección hacia la derecha o hacia la izquierda, para abajo, ó para arriba... se que se puede hacer colocando una imagen pero creo que existe el codigo ese sin necesidad de imagen.
Gracias y un saludo grande!!!
  #6 (permalink)  
Antiguo 11/10/2005, 00:28
Avatar de DvD AdN  
Fecha de Ingreso: mayo-2005
Ubicación: Frente al monitor
Mensajes: 610
Antigüedad: 11 años, 8 meses
Puntos: 0
Cita:
se ve mucho en los programas
Exactamente! En los programas, pero no con HTML.
__________________
Keep f***ing learning
Ask for f***ing help.
Use f***ing spell check.
Think about all the f***ing possibilities.
  #7 (permalink)  
Antiguo 11/10/2005, 00:37
Avatar de vpereyra  
Fecha de Ingreso: septiembre-2004
Ubicación: Lima, Peru
Mensajes: 374
Antigüedad: 12 años, 4 meses
Puntos: 0
aqui van los values correctos:
value=&#9 6 5 8 ;
value=&#9 6 5 0 ;
value=&#9 6 6 0 ;
value=&#9 6 6 8 ;

parece que el de izquierda y derecha no funcionan, pero arriba y abajo si los veo por aca:
http://www.victorpereyra.com/PreguntasForosDelWeb.htm
__________________
Victor Pereyra

Última edición por vpereyra; 11/10/2005 a las 00:54
  #8 (permalink)  
Antiguo 11/10/2005, 00:51
 
Fecha de Ingreso: octubre-2004
Mensajes: 708
Antigüedad: 12 años, 2 meses
Puntos: 3
Mil gracias vpereyra...
Esos son los que voy a utilizar, se que se les puede poner la rayita vertical en la base del triangulo... pero bueno, será para la proxima!!!
Te mando un saludo grandote!!!
  #9 (permalink)  
Antiguo 11/10/2005, 10:27
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 11 años, 11 meses
Puntos: 0
ahhh pero yo pensé que querías un botón con forma de flecha, no un botón con una flecha adentro =P

Suerte
Fede
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #10 (permalink)  
Antiguo 12/10/2005, 12:51
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 2 meses
Puntos: 317
Hola todos :
como de costumbre, estoy llegando tarde. Aprovecho el mensaje para agregar 3 comentarios.


El tema ya se tocó antes varias veces; y hay algunas flechas más.

Webdings, ¿sólo para Explorer?


Los caracteres pueden no verse iguales por las propiedades de la fuente. El navegador redondea el tamaño si la fuente original no lo tiene disponible (4; 6; 8; 10; y 12 puntos debería estar en cualquiera). No todas las fuentes tienen todas las flechas, y el navegador la va a reemplazar por otra (o por un "" ) que quizá no tenga el mismo tamaño. También puede haber problemas de formato (p.e. : bold) que deforme el alto con respecto al ancho.


Por último, sí se pueden hacer botones con forma de flechas

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<style>
body{
 text-align : center; 
}
.arriba{
 width : 50px;
 height : 50px;
 font-size : 1px;
 border-style : solid;
 border-top-color : #fff;
 border-left-color : #fff;
 border-right-color : #fff;
 border-bottom-color : #000;
 border-top-width : 1px;
 border-left-width : 25px;
 border-right-width : 25px;
 border-bottom-width : 50px;
 background-color : #000; 
 padding : 0;
}
.derecha{
 width : 50px;
 height : 50px;
 font-size : 1px;
 border-style : solid;
 border-top-color : #fff;
 border-left-color : #000;
 border-right-color : #fff;
 border-bottom-color : #fff;
 border-top-width : 25px;
 border-left-width : 50px;
 border-right-width : 1px;
 border-bottom-width : 25px;
 background-color : #000; 
 padding : 0;
}
.izquierda{
 width : 50px;
 height : 50px;
 font-size : 1px;
 border-style : solid;
 border-top-color : #fff;
 border-left-color : #fff;
 border-right-color : #000;
 border-bottom-color : #fff;
 border-top-width : 25px;
 border-left-width : 1px;
 border-right-width : 50px;
 border-bottom-width : 25px;
 background-color : #000; 
 padding : 0;
}
.abajo{
 width : 50px;
 height : 50px;
 font-size : 20px;
 border-style : solid;
 border-top-color : #000;
 border-left-color : #fff;
 border-right-color : #fff;
 border-bottom-color : #000;
 border-top-width : 50px;
 border-left-width : 25px;
 border-right-width : 25px;
 border-bottom-width : 1px;
 background-color : #000; 
 padding : 0;
}
</style>
</HEAD>
<BODY>
<input type="button" class="arriba" value="" onclick="alert('arriba')" /> <br /> <br />
<input type="button" class="derecha" value="" onclick="alert('derecha')" /> <br /> <br />
<input type="button" class="izquierda" value="" onclick="alert('izquierda')" /> <br /> <br />
<input type="button" class="abajo" value="" onclick="alert('abajo')" />
</BODY></HTML>
saludos
furoya

Última edición por furoya; 13/10/2005 a las 10:57
  #11 (permalink)  
Antiguo 05/06/2007, 13:57
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 2 meses
Puntos: 317
Re: Botones tipicos con cabeza de flecha ( Play Pause Stop )

Y ya que estoy agrego otro ejemplo de botonera "Play - Pause - Stop".

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<style>

.botones{
background-color : buttonface; 
letter-spacing : 12px;
width: 150px;
text-align : center;
}

.pause{
 width : 20px;
 height : 20px;
 font-size : 1px;
 border-style : solid;
 border-top-color : buttonface;
 border-left-color : #000;
 border-right-color : #000;
 border-bottom-color : buttonface;
 border-top-width : 1px;
 border-left-width : 7px;
 border-right-width : 7px;
 border-bottom-width : 1px;
 background-color : buttonface; 
 padding : 0;
}

.play{
 width : 20px;
 height : 20px;
 font-size : 1px;
 border-style : solid;
 border-top-color : buttonface;
 border-left-color : #000;
 border-right-color : buttonface;
 border-bottom-color : buttonface;
 border-top-width : 10px;
 border-left-width : 20px;
 border-right-width : 1px;
 border-bottom-width : 10px;
 background-color : #000; 
 padding : 0;
}

.stop{
 width : 20px;
 height : 20px;
 font-size : 1px;
 border-width : 1px;
 border-style : solid;
 background-color : #000; 
 padding : 0;
}
</style>
</HEAD>
<BODY>
<div class="botones">

<input type="button" class="play" value="" onclick="alert('play')" title="PLAY">  
&nbsp;<input type="button" class="pause" value="" onclick="alert('pause')" title="PAUSE">  
&nbsp;<input type="button" class="stop" value="" onclick="alert('stop')" title="STOP">

</div>
</BODY></HTML>
  #12 (permalink)  
Antiguo 31/07/2011, 09:49
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 2 meses
Puntos: 317
Respuesta: Botones tipicos con cabeza de flecha

Aprovecho que el tema todavía vive y actualizo el ejemplo (que ya nos parece desprolijo) para hacer botones con formas.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>BOTONERA.</title>
<style type="text/css">

.botones{
 background-color : buttonface; 
 width : 130px;
 height : 40px; 
 font-size . 1px;
}

.rec {
 width : 20px;
 height : 20px;
 font-size : 1px;
 border-style : solid;
 border-color : red;
 border-radius : 10px;
 -ms-border-radius : 10px;
 -moz-border-radius : 10px;
 -webkit-border-radius : 10px;
 -khtml-border-radius: 10px;
 background-color : #F00; 
 padding : 0;
 margin : 10px;
 float : left; }

.play{
 width : 20px;
 height : 20px;
 font-size : 1px;
 border-style : solid;
 border-top-color : buttonface;
 border-left-color : #000;
 border-right-color : buttonface;
 border-bottom-color : buttonface;
 border-left-width : 20px;
 border-right-width : 1px;
 border-bottom-width : 10px;
 border-top-width : 10px;
 background-color : #000; 
 padding : 0;
 margin : 10px;
 float : left; 
}

.pause{
 width : 20px;
 height : 20px;
 font-size : 1px;
 border-style : solid;
 border-top-color : buttonface;
 border-left-color : #000;
 border-right-color : #000;
 border-bottom-color : buttonface;
 border-top-width : 1px;
 border-left-width : 7px;
 border-right-width : 7px;
 border-bottom-width : 1px;
 background-color : buttonface; 
 padding : 0;
 margin : 10px;
}

.stop{
 width : 20px;
 height : 20px;
 font-size : 1px;
 border-width : 1px;
 border-style : solid;
 background-color : #000; 
 padding : 0;
 margin : 10px;
}
</style>
</head>
<body>
<h2>Botonera. (Firefox 4; Opera 11; Chrome 12. En IExplorer 8 no se ve el bot&oacuten redondo.)<h2>
<div class="botones"><input 
type="button" class="rec" value="" onclick="alert('rec')" title="REC"><input 
type="button" class="play" value="" onclick="alert(this.className); if(this.className == 'pause')this.className='play'; else this.className='pause'" title="PLAY / PAUSE"><input 
type="button" class="stop" value="" onclick="alert('stop')" title="STOP"></div>

</body>
</html>
Agregué el de "REC", que aún no se ve en IE. Existen métodos propietarios para hacerlo 'redondo', pero no vale la pena complicar el demo, si sabemos que en algún momento va a funcionar. Además, cuadrado y todo, se entiende si lo pintamos de rojo.
Otra variación es el cambio "PLAY / PAUSE". Lo puse per codere, no agrega ni quita nada.


Intentando hacer triángulos en CSS

Animación amorfa en div.

Última edición por furoya; 14/05/2012 a las 18:13 Razón: Agregar enlaces.
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 04:52.