Button Animations CSS (w/ code)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);
}
}
.shakeanimationcss {
margin-top: 1em;
width: 20%;
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 #c2c2c2;
-webkit-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.7s;
}
.shakeanimationcss:hover {
background-color: #c2c2c2;
animation: vibrate 1s infinite;
}
Use this shaking button animation, which inclues code anywhere you would like!