JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="button">
<p>Button</p>
</div>
</div>
CSS
.container {
margin: 60px;
}
.button {
position:relative;
height:60px;
width:200px;
background-color:#333;
font-family: sans-serif;
font-size: 16px;
color: #fff;
border: 1px solid #f3f3f3;
border-radius: 3px;
text-align: center;
}
.button > p {
margin-top: 20px;
}
.button:hover {
-webkit-animation: wiggle 1s linear 1 normal;
-moz-animation: wiggle 1s linear 1 normal;
animation: wiggle 1s linear 1 normal;
}
@-webkit-keyframes wiggle {
0% {
top: 0; left: 0;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
25% {
top: 1; left: 1px;
-ms-transform: rotate(-1deg); /* IE 9 */
-webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
transform: rotate(-1deg);
}
50% {
top: 2; left: 0px;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
75% {
top: 1; left: -1px;
-ms-transform: rotate(1deg); /* IE 9 */
-webkit-transform: rotate(1deg); /* Chrome, Safari, Opera */
transform: rotate(1deg);
}
100% {
top: 0; left: 0px;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
}
@-moz-keyframes wiggle {
0% {
top: 0; left: 0;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
25% {
top: 1; left: 1px;
-ms-transform: rotate(-1deg); /* IE 9 */
-webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
transform: rotate(-1deg);
}
50% {
top: 2; left: 0px;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
...