Boton call to action forma de flecha

matiasgreisert · #1 (**permalink**) 27/11/2011, 13:33

Hola necesitaria crear un boton con forma de flecha pero no se como deberia modificar los bordes para darle la forma correcta. El boton deberia decir Comprar en su interior, es el call to action para un carrito de compras...Espero sus respuestas, muchas gracias

IsaBelM · #2 (**permalink**) 27/11/2011, 13:46

usa <input image> o <button>

matiasgreisert · #3 (**permalink**) 27/11/2011, 13:59

Gracias por tu respuesta Isabel, pero no entiendo como hago para darle la forma de flecha a ese botón. Necesito que el boton tenga forma de flecha, con css se puede hacer?

IsaBelM · #4 (**permalink**) 27/11/2011, 14:07

el caso es que no es posible, de ahí que haya que usar una imagen

matiasgreisert · #5 (**permalink**) 27/11/2011, 14:20

OK, muchas gracias ahora entendi...si lo resuelvo, copio el codigo para que otros lo puedan utilizar...gracias por tu ayuda

emprear · #6 (**permalink**) 27/11/2011, 15:35

Experimenta para ver que otros efectos se pueden conseguir

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>
<title>Flechas con css</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/* estilos comunes */
.flecha-arriba,
.flecha-izquierda,
.flecha-derecha,
.flecha-abajo {
  border-style: dashed;
  border-color: transparent;
  border-width: 0.53em;
  display: -moz-inline-box;
  display: inline-block;
  /* manejas el tamaño de la fuente para el tamaño de las flechas */
  font-size: 50px;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  width: 0;
}
 
/* bordes para las cuatro direcciones */
.flecha-arriba {
  border-bottom-width: 1em;
  border-bottom-style: solid;
  border-bottom-color: #005100;
  bottom: 0.25em;
}
.flecha-izquierda {
  border-right-width: 1em;
  border-right-style: solid;
  border-right-color: #005100;
  right: 0.25em;
}
.flecha-derecha {
  border-left-width: 1em;
  border-left-style: solid;
  border-left-color: #005100;
  left: 0.25em;
}
  .flecha-abajo {
  border-top-width: 1em;
  border-top-style: solid;
  border-top-color: #005100;
  top: 0.25em;
}
 
/* otro método, hay que aplicarlo sobre un elemento de bloque (div) */
.flecha-multi {
  border-color: red green blue orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 
.flecha-multi-derecha {
  border-color: transparent transparent transparent orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 
.flecha-multi-arriba {
  border-color: transparent transparent blue transparent;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 
 
input{
background-color: transparent;
color: transparent;
}
/*]]>*/
</style>
</head>
<body>
 
<div>
<p>Flechas</p>
<span class="flecha-arriba"><!-- flecha --></span>
<span class="flecha-izquierda"><!-- flecha --></span>
<span class="flecha-derecha"><!-- flecha --></span>
<span class="flecha-abajo"><!-- flecha --></span>
 
<p>Input</p>
<form action="x.php">
<p><input type="submit" value="." class="flecha-derecha" /></p>
</form>
 
</div>
 
<div>
<p>Otro método<br /></p>
 
<div class="flecha-multi"><!-- flecha --></div>
<br /><br />
<div class="flecha-multi-derecha"><!-- flecha --></div>
<br /><br />
<div class="flecha-multi-arriba"><!-- flecha --></div>
 
<p>Input</p>
<form action="x.php">
<p><input type="submit" value="." class="flecha-multi-derecha" /></p>
</form>
 
</div>
</body>
</html>

Saludos