Diseño web: Crear efecto CSS3 a un botón HTML5

16 oct 2014

Ya vimos cómo crear fondos de degradados de color y posteriormente, aplicando ese mini-tutorial, os mostramos cómo crear botones profesionales con CSS3 y HTML5.

En esta ocasión os enseñaremos a darle efecto al botón, agregando profundidad al mismo. Para ello únicamente jugaremos con las dos sombras (box-shadow) que tenemos declaradas en nuestro archivo CSS y la posición del elemento.

Éste será el resultado:
Haz click
En primer lugar, recordamos que en tu fichero .html debes escribir el enlace del botón:

<!–– HTML ––>
<a class=“boton” href=“http://www.recreacomunicacion.com” title=“Recrea Comunicación”>Botón de ejemplo</a>

Y, como ya aprendimos en el tutorial de “Cómo crear botones profesionales con CSS3 y HTML5″, debes declarar la clase “boton” en tu archivo .css. Además añadiremos la clase .boton:active que mostrará su estilo únicamente cuando hagamos click en el botón:

/* CSS */
.boton{
background-color: #2dc234;
background-image: -webkit-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -moz-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: -o-linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
background-image: linear-gradient(rgba(41, 150, 47, .8), rgba(45, 194, 52, .2));
-ms-border-radius:8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
box-shadow: 0 8px 0 #197b1d, 0 10px 20px rgba(0, 0, 0, .4);
color: #fff;
display: inline-block;
font-family: ‘Pacifico’, Arial, sans-serif;
font-size: 30px;
line-height: 1;
padding: 15px 25px;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(25, 123, 29, .7);
}

.boton:active{
/* Disminiumos la cantidad de sombras */
-webkit-box-shadow: 0 5px 0 #197b1d, 0 5px 10px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 5px 0 #197b1d, 0 5px 10px rgba(0, 0, 0, .4);
box-shadow: 0 5px 0 #197b1d, 0 5px 10px rgba(0, 0, 0, .4);
/* Movemos ligeramente el botón hacia abajo */
position: relative;
top: 5px;
}

El botón, como ya habíamos adelantado, tendrá el siguiente efecto:
Haz click

4 comentarios en “Diseño web: Crear efecto CSS3 a un botón HTML5”

  1. excelente, gracias! dice:

    Muchas gracias por la ayuda :)

    1. serna dice:

      Gracias por leernos :)

  2. jean diaz dice:

    porque no me sale estilo de letra

    1. serna dice:

      Hola Jean,

      Seguramente no tengas cargado el tipo de letra. Una solución es pegar el siguiente código dentro de la etiqueta de tu página:

      Espero que te sirva.

      Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>