<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a href="#" class="snip1489 ion-ios-star-outline"></a> <a href="#" class="snip1489 hover blue ion-ios-list-outline"></a> <a href="#" class="snip1489 ion-ios-chatboxes-outline"></a> <a href="#" class="snip1489 ion-ios-home-outline"></a> <a href="#" class="snip1489 ion-ios-pie-outline"></a> <a href="#" class="snip1489 ion-ios-gear-outline"></a>

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); .snip1489 { position: relative; font-size: 40px; color: #e6e6e6; 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 #e6e6e6; content: ''; z-index: -1; border-radius: 50%; } .snip1489:before { color: #fff; } .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: #c0392b; } .snip1489:hover:after, .snip1489:active:after, .snip1489.hover:after { border-color: transparent #c0392b; -webkit-transform: rotate(360deg); transform: rotate(360deg); } /* Demo purposes only */ body { background-color: #212121; }