13 junio 2013

Botón Css3 con Efecto 3D Animado

Botón Css3 con Efecto 3D Animado

Español | Free | Css Html5 | Online

Descripción:
La creación de botones 3D con Css3 ahora son muy usados por todos, por que da un efecto original visualmente, en este tutorial vamos a aprender a realizar dicho botón, con la simulación de presionado y unos sombras desenfocadas a la hora de hacer el :hover. claro que lo puedes modificar y personalizar según desees.

Empezamos! creamos lo básico con html.

Ahora le daremos el efecto 3D, crearemos un archivo button.css el cual será llamado desde el index o donde queramos realizar el efecto.

.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);
}

El Resultado lo podeís ver aca(Clic al botón)

CLIC AQUI!

BUSCADOR

CATEGORÍAS

Aprende a como descargar

13 junio 2013

Botón Css3 con Efecto 3D Animado

No hay comentarios:

Publicar un comentario

Post Top Ad

CATEGORÍAS DESTACADAS

SÍGUENOS EN FACEBOOK

TELEGRAM

RECIBE NUESTROS POST

ENTRADAS POPULARES