Orange Shake Button Animation With Code CSS

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


.Orangeshakebutton {
    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 #ffa500;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.7s;
}


.Orangeshakebutton:hover {
  background-color: #ffa500;
  animation: vibrate 1s infinite;
}
Button Animations CSS (w/ code)

Orange Shake Button Animation With Code CSS
