Hover over spin effect using CSS style button background rgba 100 100 100 0 1 border 0 box sizing border box margin 0 padding 0 isolation isolate box shadow inset 0 0 0 2px red color red font size inherit font weight 700 position relative vertical align middle button before button after box sizing inherit content position absolute width 100 height 100 spin box sizing border box width 5em height 5em border radius 100 box shadow none spin hover color blue spin before spin after top 0 left 0 border radius 100 box shadow none spin before border 2px solid transparent spin after border 0px solid transparent spin hover before border top color blue border right color blue border bottom color blue transition border top color 0 15s linear border right color 0 15s linear 0 10s border bottom color 0 15s linear 0 20s spin hover after border radius 100 border top 2px solid blue border left width 2px border right width 2px transform rotate 270deg transition transform 0 4s linear 0s border left width 0s linear 0 35s style button class spin Spinny 1 button button class spin Spinny 2 button button class spin Spinny 3 button
none spin before border 2px solid transparent spin after border 0px solid transparent spin hover before border top color blue border right color blue border bottom color blue transition border top color 0 15s linear border right color 0 15s linear 0 10s border bottom color 0 15s linear 0 20s spin hover after border radius 100 border top 2px solid blue border left width 2px border right width 2px transform rotate 270deg transition transform 0 4s linear 0s border left width 0s linear 0 35s style button class spin Spinny 1 button button class spin Spinny 2 button button class spin Spinny 3 button