Botón efecto 3D con CSS3

Un bonito efecto que podeis añadir en vuestros botones y que harán que sean mas que atractivos atrayendo a los visitantes a hacer clic en el.

Podéis toquetear el código o seguir leyendo para aprender un poco mas de CSS3 y ver una pequeña explicación.

Código HTML

<button>
    <span>Download file</span>
</button>

El código html es realmente simple, nos aprovechamos de la etiqueta botón para que así no debamos preocuparnos por los eventos de clic y release, nuestro código CSS ya se encargará de ello.

Dentro del botón añadimos un span simplemente para hacer un pequeño efecto lateral al texto y que nuestro botón coja un efecto 3d más realista. En caso de no querer este efecto, podemos quitarlo al gusto.

Código CSS/CSS3

Como podréis observar el código CSS no lleva los prefijos de los navegadores, pero es importante añadirlos para obtener compatibilidad con navegadores.

Esta vez nos aprovechamos de las bondades del CSS3 ya que gracias a ello podemos realizar botones como este sin necesidad de ninguna imagen, cosa que años atras era prácticamente imposible.

Atención a la línea de la transición que nos define el tiempo y tipo de animación que sufrirá el botón al cambiar de estado consiguiendo así un efecto mucho más realista.

button {
    background: linear-gradient(top, rgb(97,196,25) 0%, rgb(149,226,90) 100%);
    margin: 0 auto;
    padding: 10px 20px 10px 20px;
    border-radius: 5px;
    border: 1px solid #c4c4c4;
    box-shadow: 0px 6px 0px 0px rgba(88, 163, 31, 1),
                0px 5px 12px 0px rgba(0, 0, 0, 0.6),
                inset 0px 0px 10px -5px rgba(0, 0, 0, 1);
    transition: all 100ms linear;
    touch-callout: none;
    user-select: none;
    cursor: pointer;
    display: block;
    position: relative;

    font-family: Arial Black, Gadget, sans-serif;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

button > span {
    display: block;
    -webkit-transform: skew(5deg, 0deg);
}

button:active {
    top: 4px;
    box-shadow: 0px 2px 0px 0px rgba(88, 163, 31, 1),
                0px 5px 5px 0px rgba(0, 0, 0, 0.6),
                inset 0px 0px 10px -5px rgba(0, 0, 0, 1);
}

Todo el código es bastante sencillo y es lo que va dando forma al botón 3D. Me gustaría resaltar como diferencia que hacemos uso de varias sombras que se aplican una encima de la otra para crear ese efecto relieve 3D. Usando “box-shadow” se pueden aplicar tantas sombras como se desee siempre y cuando se tenga en cuenta que han de ir en orden.

Corre la voz!

Comentarios

  1. ()

    Grcias está buenísimo! Me encantó

  2. ()

    Gracias por compartir, muy buen tutorial


Escribir un comentario

Escribe lo que desees, si quieres incluir código hazlo usando los tags <pre>

Nombre:
Email:
Website: