<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="snip1438 ion-ios-star-outline"></a> <a href="#" class="snip1438 hover ion-ios-list-outline"></a> <a href="#" class="snip1438 ion-ios-chatboxes-outline"></a> <a href="#" class="snip1438 ion-ios-home-outline"></a> <a href="#" class="snip1438 ion-ios-pie-outline"></a> <a href="#" class="snip1438 ion-ios-gear-outline"></a>

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); .snip1438 { position: relative; overflow: hidden; font-size: 40px; color: rgba(255, 255, 255, 0.8); margin: 40px; padding: 3px; display: inline-block; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); text-decoration: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .snip1438::before { background-color: #2b2b2b; width: 75px; height: 75px; line-height: 75px; } .snip1438:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #f39c12; content: ''; z-index: -1; display: inline-block; -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, -100%); transform: rotate(-45deg) scale(1.5) translate(0%, -100%); } .snip1438:before, .snip1438:after { -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .snip1438:hover, .snip1438:active, .snip1438.hover { color: #ffffff; } .snip1438:hover:after, .snip1438:active:after, .snip1438.hover:after { -webkit-transform: rotate(-45deg) scale(1.5) translate(0%, 0%); transform: rotate(-45deg) scale(1.5) translate(0%, 0%); } /* Demo purposes only */ body { background-color: #212121; }