Animated buttons

div { /*background-color: lightblue;*/ text-align: center; margin-top: 200px; font-family: helvetica, sans-serif; font-size: 2em; } .btn { text-decoration: none; color: purple; display: inline-block; position: relative; overflow: hidden; line-height: 1.5em; border-bottom: 1px solid purple; cursor: pointer; width: 150px; -webkit-transition: color 2000ms; -o-transition: color 2000ms; transition: color 2000ms; } .btn:hover { color: white; } .text { position: relative; } .bg { position: absolute; top: 100%; left: -5px; width: 200px; height: 250px; padding: 0 10px 0 5px; background-color: purple; animation: btnaniminverse 700ms ease-in-out; } .btn:hover .bg { -webkit-animation: btnanim 500ms forwards ease-in-out; -o-animation: btnanim 500ms forwards ease-in-out; animation: btnanim 500ms forwards ease-in-out; } @-moz-keyframes btnanim { 0% { top: 100%; } 25% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 75% { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 100% { top: 0; } } @-o-keyframes btnanim { 0% { top: 100%; } 25% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 75% { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 100% { top: 0; } } @-webkit-keyframes btnanim { 0% { top: 100%; } 25% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 75% { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 100% { top: 0; } } @keyframes btnanim { 0% { top: 100%; } 25% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 75% { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 100% { top: 0; } } @-moz-keyframes btnaniminverse { 0% { top: 0; } 25% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 75% { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 100% { top: 100%; } } @-o-keyframes btnaniminverse { 0% { top: 0; } 25% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 75% { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 100% { top: 100%; } } @-webkit-keyframes btnaniminverse { 0% { top: 0; } 25% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 75% { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 100% { top: 100%; } } @keyframes btnaniminverse { 0% { top: 0; } 25% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 50% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 75% { -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } 100% { top: 100%; } }