JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<div class"hover">
    <a class="button">Rotation</a>
</div>

And now for the CSS:

CSS

.button {
    background:#aaa;
    color:#555;
    font-weight:bold;
    font-size:15px;
    padding:10px 15px;
    border:none;
    margin:50px;
    cursor:pointer;
    -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
    -o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
    -o-transition-duration:1s,1s,1s,1s,1s,1s,1s;
    -moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
    -moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;
    transition-property:width,height,transform,background,font-size,opacity;
    transition-duration:1s,1s,1s,1s,1s,1s;
    -webkit-border-radius:5px;
    border-radius:5px;
    box-shadow:0 0 2px rgba(0,0,0,0.5);
    text-shadow:0 0 5px rgba(255,255,255,0.5);
    display: inline-block;    /* It is important for the button to rotate*/
}

.hover {
    padding: 20px;
    background: red;
}

.hover:hover, .button:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    background:#99A411;
    font-size:30px;
    color:#fff;
}