Circle Icon with Rotating Border on Hover

<a href="#" class="snip1489 ion-ios-home-outline"></a>
// Circle icon with rotating border on hover // @import url(; .snip1489 { position: relative; font-size: 40px; color: #37413c; width: 75px; margin: 40px; height: 75px; line-height: 75px; display: inline-block; text-align: center; -webkit-perspective: 50em; perspective: 50em; text-decoration: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .snip1489:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 2px solid #dae2de; content: ''; z-index: -1; border-radius: 50%; } .snip1489:before { color: #000000; } .snip1489:before, .snip1489:after { -webkit-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; } .snip1489:hover, .snip1489:active, .snip1489.hover { color: #cc9966; } .snip1489:hover:after, .snip1489:active:after, .snip1489.hover:after { border-color: transparent #cc9966; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
Expand for more options Login