Crear Botón con Efecto 3D Animado CSS3 – HTML5

mayo 27, 2013 | Html5 & Css3, Recursos

La creación de botones 3D con Css3 ahora son muy usados por todos los front-end  por que da un efecto original visualmente, en este tutorial vamos a aprender a realizar dicho boton, con la simulación de presionado y unos sombras desenfocadas a la hora de hacer el :hover. empezemos!

Empezamos creando la estructura base de nuestro documento html5, haciendo la llamada a las hojas de estilo Css (button.css).





<a class="boton colorBoton formaBoton" href="#Aqui URL">PRESIONAME!</a>




Ahora haremos la magia dando los estilos correspondiente a nuestro botón para dale el efecto 3D, recuerden que hemos asignado las siguientes clases ( Class=» boton colorRojo formaBoton») estas clases ayudaran a dar el tamaño, color y forma del nuestro boton.

.boton {
text-decoration: none;
 color: #fff;
 font-weight: bold;
 padding: 12px 20px;
 font-size: 18px;
 border-radius: 10px;
 background-color: #666666;
 box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
 position: relative;
 border-bottom: 1px solid rgba(255,255,255,0.2);
 display: inline-block;
 font-family: Arial, Helvetica, sans;
 text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
}

.boton:hover {
 box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
 color: #fff !important;
}

.boton:active {
 top: 7px;
 box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
 color: #fff !important;
}

.formaBoton {
 border-radius: 5px;
 padding-left: 25px;
 padding-right: 25px;
}

.colorRojo{
 background-color: #c34747;
 box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.colorRojo:hover {
 box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.colorRojon:active {
 box-shadow: 0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}

Es muy sencillo y facil de realizar este efecto con la simulación de un verdadero boton echo en 3D, dejare la demo y también la descarga de los archivos (contraseña: antocas.com), he agregado algunos otros colores para los botones, colores como: rojo, anaranjado, verde, rosa, azul y purpura.

Relacionados