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.
