presionado - ¿Es posible hacer botones puntiagudos(tipo manzana) con CSS3?

efectos para botones css

Question

Quiero hacer un botón como el botón Atrás de iPhone solo con CSS3 .

¿Es posible? ¿Cómo?

Puedes ver mi objetivo aquí :

Answer 1

Tal vez puedas hacer esto haciendo una flecha CSS

Aquí hay un ejemplo: http://jsfiddle.net/t5C4p/

HTML

<a href="#">
    <span class="arrow"></span>
    <span class="button">button</span>
</a>

CSS

.arrow {
    display: block;
    float: left;
    width: 0;
    height: 0;
    border:  15px solid transparent;
    border-right-color: #000;
}

.button {
    display: block;
    float: left;
    line-height: 20px;
    border: 2px solid #000;
    padding: 3px;
}

Answer 2

Pruebe esto: http://jsfiddle.net/stowball/XvFFX/

Answer 3

Aquí hay un ejemplo de salida:

http://jsfiddle.net/stowball/XvFFX/

HTML

<h2>iOS style back buttons with CSS3</h2>
<div>
    <a href="#"><span>Back</span></a>
</div>

CSS

div {
    background: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 10px;
}

a {
    background: #950006;
    background: -moz-linear-gradient(top, #de0009 0%, #950006 100%);
    background: -o-linear-gradient(top, #de0009 0%, #950006 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #de0009), color-stop(100%, #950006));
    background: -webkit-linear-gradient(top, #de0009 0%, #950006 100%);
    background: linear-gradient(top, #de0009 0%, #950006 100%);
    border: solid #dd0009;
    border-width: 1px 1px 1px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    margin-left: 20px;
    margin-right: 2px;
    padding: 0 7px 0 3px;
    position: relative;
    text-decoration: none;
}

a:before {
    background: #950006;
    background: -moz-linear-gradient(-45deg, #de0009 0%, #950006 100%);
    background: -o-linear-gradient(-45deg, #de0009 0%, #950006 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #de0009), color-stop(100%, #950006));
    background: -webkit-linear-gradient(-45deg, #de0009 0%, #950006 100%);
    background: linear-gradient(-45deg, #de0009 0%, #950006 100%);
    border: solid #dd0009;
    border-width: 0 0 1px 1px;
    border-radius: 2px 0 2px 2px;
    content: '''';
    display: block;
    height: 21px;
    left: -11px;
    position: absolute;
    top: 3px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 21px;
}

a:hover, a:focus {
    border-color: #b50007;
    background: #7e0004;
    background: -moz-linear-gradient(top, #b50007 0%, #7e0004 100%);
    background: -o-linear-gradient(top, #b50007 0%, #7e0004 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b50007), color-stop(100%, #7e0004));
    background: -webkit-linear-gradient(top, #b50007 0%, #7e0004 100%);
    background: linear-gradient(top, #b50007 0%, #7e0004 100%);
}

a:hover:before, a:focus:before {
    border-color: #b50007;
    background: #7e0004;
    background: -moz-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
    background: -o-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #b50007), color-stop(100%, #7e0004));
    background: -webkit-linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
    background: linear-gradient(-45deg, #b50007 0%, #7e0004 100%);
}

a span {
    color: #fff;
    font-weight: bold;
    position: relative;
}

Answer 4

Aquí hay un violín que hice con un "sesgo" (para hacer que la flecha sea más delgada) y una punta puntiaguda, para que sea aún más iOS, como:

(Se eliminó el enlace jsfiddle debido a nuevas pautas)

Actualizar

Un Blogpost sobre la creación de botones de flecha de estilo iOS5 o iOS6

Entrada en el blog

Answer 5

Esta es una solución posible, que utiliza principalmente CSS2 (con solo un toque de CSS3 opcional para border-radius y box-shadow). Esta es una solución limitada y sencilla que parece funcionar en las versiones actuales (a partir de noviembre de 2012) de Chrome y Firefox, y que también se presenta de manera casi idéntica en IE7-9. No tengo IE10 para probar, pero uno puede suponer razonablemente que está bien.

Escribí "limitado" porque estos botones deben usar colores de fondo sólidos para mostrar de forma idéntica en todos los navegadores. Además, la sombra de caja no se extiende por completo hasta el "punto", pero se usa con moderación, puede no ser objetable. Box-shadow es opcional de todos modos, ya que no está soportado en el viejo IE a menos que se aumente con algo como CSS3Pie .

http://jsfiddle.net/yHprm/11/

.wiz-buttons > a {
  position: relative;
  display: block;
  font: normal 14px Arial;
  text-decoration: none;
  cursor: pointer;
}
.wiz-buttons > a > .button {
  min-width: 75px;
}
/* Next Button */

.wiz-buttons > .next {
  color: #FFF;
}
.wiz-buttons > .next > .arrow-inner {
  display: block;
  position: absolute;
  top: 1px;
  right: 3px;
  z-index: 2000;
  width: 0;
  height: 0;
  border: 14px solid transparent;
  border-left-color: #E38A13;
}
.wiz-buttons > .next > .arrow {
  display: block;
  float: right;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-left-color: #CC790B;
}
.wiz-buttons > .next > .button {
  display: block;
  float: right;
  line-height: 20px;
  background-color: #E38A13;
  border: 2px solid #CC790B;
  border-right: 0;
  padding: 3px 3px 3px 9px;
  text-align: center;
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px;
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.wiz-buttons > .next:hover > .arrow {
  border-left-color: #ad6608;
}
.wiz-buttons > .next:hover > .arrow-inner {
  border-left-color: #CC790B;
}
.wiz-buttons > .next:hover > .button {
  background-color: #CC790B;
  border-color: #b66c09;
}
/* Previous Button */

.wiz-buttons > .previous {
  color: #666;
}
.wiz-buttons > .previous > .arrow-inner {
  display: block;
  position: absolute;
  top: 1px;
  left: 3px;
  z-index: 2000;
  width: 0;
  height: 0;
  border: 14px solid transparent;
  border-right-color: #f4f4f4;
}
.wiz-buttons > .previous > .arrow {
  display: block;
  float: left;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-right-color: #e8e8e8;
}
.wiz-buttons > .previous > .button {
  display: block;
  float: left;
  line-height: 20px;
  background-color: #f6f6f6;
  border: 2px solid #eaeaea;
  border-left: 0;
  padding: 3px 9px 3px 3px;
  text-align: center;
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.wiz-buttons > .previous:hover > .arrow {
  border-right-color: #e1e1e1;
}
.wiz-buttons > .previous:hover > .arrow-inner {
  border-right-color: #eaeaea;
}
.wiz-buttons > .previous:hover > .button {
  background-color: #eaeaea;
  border-color: #e3e3e3;
}

<div class="wiz-buttons">
  <a class="previous" href="#">
    <span class="arrow"></span>
    <span class="arrow-inner"></span>
    <span class="button">Previous</span>
  </a>
  <a class="next" href="#">
    <span class="arrow"></span>
    <span class="arrow-inner"></span>
    <span class="button">Next</span>
  </a>
</div>

Espero que alguien encuentre esto útil.