CSS
// Circle icon with rotating border on hover //
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.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);
}
