Crear un botón 3D con CSS3

En este tutorial vamos a aprender a crear un botón en 3D con efecto de pulsación y algunas sombras para hacerlo más atractivo. Todo ello, usando únicamente CSS3 (sobre HTML, claro).

Empecemos, pues, creando la base en HTML.

Código :

<html>
<head>
    <title>Bot&oacute;n 3D con CSS3</title>
</head>
<body>
    <button class="boton3d">Cristalab</button>
</body>
</html>

Teniendo esto, solo nos aparecerá un botón formateado con la interpretación por defecto que haga el navegador. Para aplicar estilos, hemos creado la clase boton3d que desarrollaremos a continuación.

Primero resetearemos los estilos por defecto añadiendo al CSS lo siguiente:

Código :

button::-moz-focus-inner { border: 0; } /* Elimina las interpretaciones de Firefox */

.boton3d{
       border:0;
    }

Para darle un poco más de formato, añadimos color, tamaños y fuente. Podéis editarlos a vuestro gusto.

Código :

color: #668428;
font-size: 48px;
font-family:sans-serif;
padding: 30px 50px;

Por ahora lo que tenemos es un gran botón plano, con esquinas cuadradas y texto verde oscuro.

Añadamos ahora un fondo de gradiente (recordar hacerlo tanto para -moz- como para -webkit-):

Código :

background: -moz-linear-gradient(center top , #CDEB8E 0%, #A5C956 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));

De nuevo, editad los valores a vuestro gusto. Yo seguiré con los verdes.

Ahora vamos a redondear las esquinas. También hay que tener en cuenta aplicar -moz- y -webkit-. Modificando los valores en px tendremos unas esquinas redondas más pronunciadas (más pixeles) o menos redondeadas (menos píxeles).

Código :

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Aplicaremos también una sombra al texto, para que haya más sensación de profundidad. Yo aplicaré 1px en cada dirección:

Código :

text-shadow: 1px 1px 1px #E1FEA6;

Para que el botón tenga un efecto tridimensional, aplicaremos sombras también a este. En este caso, en una sola dirección: hacia abajo.

Código :

-moz-box-shadow: 0px 6px 0 #819F45;
-webkit-box-shadow: 0px 6px 0 #819F45;

Ahora viene cuando aplicamos estilos al botón para que se "hunda" al ser pulsado. Para ello, indicamos que la figura baje 3px al ser pulsada. Todo lo referente a la conducta que tendrá nuestro botón al ser pulsado, irá dentro de .boton3d:active{ y }.

Código :

position:relative;
top:3px;

¿Recuerdas que antes hemos aplicado una sombra hacia abajo al botón, que era de 6 píxeles? Pues bien, para que al ser pulsado de sensación de que se hunde hacia dentro, tenemos que indicar que esta sombra se reduzca a 3px, añadiendo lo siguiente (recuerda -moz- y -webkit-):

Código :

-moz-box-shadow:0px 3px 0 #819F45;
-webkit-box-shadow:0px 3px 0 #819F45;

Recordad que los colores deben seguir siendo los mismos.

Y para acabar, podemos hacer que se inviertan las gradientes, para dar sensación de cambio de perspectiva y luminosidad del botón.

Si haces esto, recuerda poner al revés los mismos colores que definiste en la gradiente de .boton3d.

Código :

background: -moz-linear-gradient(center top , #A5C956 0%, #CDEB8E 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(100%,#cdeb8e));

Juntando todo el código CSS creado, obtenemos:

Código :

  button::-moz-focus-inner { border: 0; } /* Para Firefox */

 .boton3d{
        border:0;
      color: #668428;
        font-size: 48px;
        font-family:sans-serif;
        padding: 30px 50px;
      background: -moz-linear-gradient(center top , #CDEB8E 0%, #A5C956 100%) repeat scroll 0 0 transparent;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
      -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
      text-shadow: 1px 1px 1px #E1FEA6;
      -moz-box-shadow: 0px 6px 0 #819F45;
        -webkit-box-shadow: 0px 6px 0 #819F45;

    }

 .boton3d:active{
    position:relative;
     top:3px;
    -moz-box-shadow:0px 3px 0 #819F45;
    -webkit-box-shadow:0px 3px 0 #819F45
    background: -moz-linear-gradient(center top , #A5C956 0%, #CDEB8E 100%) repeat scroll 0 0 transparent;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(100%,#cdeb8e));
    }

Espero que te haya sido útil y que lo hayas entendido. Si tienes preguntas, ¡adelante!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Crear un botón 3D con CSS3

Publica tu comentario

o puedes...