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.-
10/10/2005, 16:33
| |||
| |||
| 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.- |
|
10/10/2005, 17:58
| |||
| |||
| ¿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 |
|
10/10/2005, 18:30
| |||
| |||
| 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!!! |
|
10/10/2005, 22:23
| ||||
| ||||
| te refieres a esto? <form action="../../buscador.htm"> <input class="button" type="submit" value=">>"> </form>
__________________ Victor Pereyra |
|
10/10/2005, 22:36
| |||
| |||
| 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!!! |
|
10/10/2005, 23:28
| ||||
| ||||
| Cita: Exactamente! En los programas, pero no con HTML. se ve mucho en los programas
__________________ Keep f***ing learning Ask for f***ing help. Use f***ing spell check. Think about all the f***ing possibilities. |
|
10/10/2005, 23:37
| ||||
| ||||
| aqui van los values correctos: value=	 6 5 8 ; value=	 6 5 0 ; value=	 6 6 0 ; value=	 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; 10/10/2005 a las 23:54 |
|
10/10/2005, 23:51
| |||
| |||
| 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!!! |
|
11/10/2005, 09:27
| |||
| |||
| 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 |
|
12/10/2005, 11:51
| |||
| |||
| 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:
saludos<!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>
furoya Última edición por furoya; 13/10/2005 a las 09:57 |
|
05/06/2007, 12:57
| |||
| |||
| 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">
<input type="button" class="pause" value="" onclick="alert('pause')" title="PAUSE">
<input type="button" class="stop" value="" onclick="alert('stop')" title="STOP">
</div>
</BODY></HTML>
|
|
31/07/2011, 08:49
| |||
| |||
| 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:
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.<!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ón 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>
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 17:13 Razón: Agregar enlaces. |
