Bootstrap snippet: Rounded animated icons

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<!-- Font Awesome --> <script src="https://use.fontawesome.com/cb2d0db4c2.js"></script> <div class="container"> <div class="row"> <div class="col-md-10 icons-container"> <ul class="row text-center"> <a href="" > <li id="coffee-circle" > <span> <i class="fa fa-coffee fa-4x" id="coffee-icon"> </i> <b class="icon-description"> Coffee </b> </span> </li> </a> <a href=""> <li id="cog-circle"> <span> <i class="fa fa-cog fa-4x" id="cog-icon"> </i> <b class="icon-description"> Cog!! </b> </span> </li> </a> <a href=""> <li id="upload-circle"> <span> <i class="fa fa-upload fa-4x" id="upload-icon"> </i> <b class="icon-description"> Upload </b> </span> </li> </a> </ul> </div> <div class="col-md-4"> </div> </div> </div>
.icons-container ul li { display: inline-block; width: 12.2em; height: 12.2em; border: 1px solid #ccc; padding: 40px; border-radius: 50%; margin: 2.25em; line-height: 3.5em; color: #999; transition: 1s 0s linear; } .change-color { border-color: orange !important; border: 4px solid orange !important; color: orange !important; } .fa-coffee { transition: 1s 0s linear; } .fa-cog { transition: 1s 0s linear; } .fa-upload { transition: 1s 0s linear; } .animate-coffee { -moz-transform: scale(1.2) rotate(-45deg); -webkit-transform: scale(1.2) rotate(-45deg); -o-transform: scale(1.2) rotate(-45deg); -ms-transform: scale(1.2) rotate(-45deg); transform: scale(1.2) rotate(-45deg); } .animate-cog { transform: scale(1.2); } .animate-upload { -moz-transform: scale(1.2) translateY(-10px); -webkit-transform: scale(1.2) translateY(-10px); -o-transform: scale(1.2) translateY(-10px); -ms-transform: scale(1.2) translateY(-10px); transform: scale(1.2) translateY(-10px); }
$(document).ready(function() { $("#coffee-circle").on("mouseenter", function() { $('#coffee-icon').addClass('animate-coffee'); $(this).addClass("change-color"); }); $("#coffee-circle").on("mouseleave", function() { $('#coffee-icon').removeClass('animate-coffee'); $(this).removeClass("change-color"); }); $("#cog-circle").on("mouseenter", function() { $('#cog-icon').addClass('fa-spin'); $(this).addClass("change-color"); }); $("#cog-circle").on("mouseleave", function() { $('#cog-icon').removeClass('animate-cog fa-spin'); $(this).removeClass("change-color"); }); $("#upload-circle").on("mouseenter", function() { $('#upload-icon').addClass('animate-upload'); $(this).addClass("change-color"); }); $("#upload-circle").on("mouseleave", function() { $('#upload-icon').removeClass('animate-upload'); $(this).removeClass("change-color"); }); });
chubureitor

Rounded animated icons

chubureitor
  Sep 7th, 01:03
1.1K Views