JSFiddle - React, Tailwind, and code Playground
HTML
<div id="button"></div>
CSS
#button
{
position: absolute;
height: 24px;
width: 24px;
left: 50%;
top: 22px;
margin-left: -12px;
background: #8ac7e6;
/* анимация */
transition-duration: 100ms;
-o-transition-duration: 100ms;
-moz-transition-duration: 100ms;
-webkit-transition-duration: 100ms;
}
#button:hover
{
height: 36px;
width: 36px;
margin-left: -16px;
top: 16px;
/* поворот */
transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#button:active
{
transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}