Transiciones combinadas con CSS3

Transiciones combinadas con css3

Buenas, ahora este tutorial, otro de css3 y sus sorprendentes hazañas, este es un ejemplo de transacciones que se aplican de modo diferente cuando colocamos el cursor encima del botón y cuando lo quitamos con lo que se genera una animación sin necesidad de utilizar JavaScript.

El concepto es simple y puede ser aplicado a cualquier elemento, basta poner un tipo de transición en la regla de estilo del enlace y otra en la del efecto hover:

Otro ideal de jugar con el css3 y lograr cosas sorprendentes.

<style> #buttonwrap { margin: 0 auto; text-align: center; width: 600px; } #button { -moz-transform: rotate(720deg); -webkit-transform: rotate(720deg); -o-transform: rotate(720deg); -ms-transform: rotate(720deg); -moz-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s; -webkit-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s; -o-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; background-image: -moz-linear-gradient(center top , #5BE93A, #278312); -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312)); border: 5px solid #AEFBAE; border-radius: 25px; color: #FFF; display: block; font-family: Tahoma; font-size: 60px; font-weight: 300; margin: 80px auto; padding: 60px 15px; position: relative; text-decoration: none; text-shadow: 5px 3px 1px rgba(0, 0, 0, 0.5); width: 150px; z-index: 1; } #button:hover { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transition: padding 0.2s ease 0s, top 0.2s ease 0s; -webkit-transition: padding 0.2s ease 0s, top 0.2s ease 0s; -o-transition: padding 0.2s ease 0s, top 0.2s ease 0s; background-image: -moz-linear-gradient(center top , #5BE93A, #5BE93A, #278312); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312)); padding: 70px 30px; top: -10px; } #button:after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: -1; } #button:before { -moz-transition: all 0.2s ease 0s; -wekit-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; border-radius: 35px; bottom: -30px; box-shadow: 0 0 100px rgba(255, 255, 255, 0.1) inset; content: ""; left: -30px; position: absolute; right: -30px; top: -30px; z-index: -2; } #button:hover:before { bottom: -20px; box-shadow: 0 0 100px rgba(255, 255, 255, 0.2) inset; left: -20px; right: -20px; top: -20px; } #button:active { box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) inset; } </style>

CSS3

<div id="buttonwrap"> <a href="#" id="button">CSS3</a> </div>

1.  ¿Te gusto el tutorial? → Siguenos en nuestra redes sociales. 
2. tienes dudas, comenta todas serán respondidas.

¡Compártelo!

Tweet