Button Animations CSS (w/ code)

Red Shake Button Animation With Code CSS

See Code

Go Back

CSS Code Below

@keyframes vibrate { 0%{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 25%{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } 50%{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 75%{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } 100%{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } }
.redshakebutton { margin-top: 1em; width: 30%; padding-top: 0.3em; padding-bottom: 0.3em; background-color: #cccccc; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border: 4px solid #e60000; -webkit-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.7s; }
.redshakebutton:hover { animation: vibrate 1s infinite; }