Blogger Ever

Google new trendy fixed circular icons using CSS3 and jQuery

Google's new trend of circular fixed icons is now been a trend of web too, so here is how can you create these amazing animated buttons using CSS3 and jQuery.
Google new trendy fixed circular icons using CSS3 and jQuery

On some of the recent Google apps updates I found it pretty cool and though creative that Google start using circular icons that are fixed on right bottom corner of screen and pop-up icons on hover. I created that and found it pretty new.


See the Pen Google Inbox Style Icons by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.


The icons markup should be in a manner that the trigger icons should be in the last and have the following makrup:
<div class='icon trigger'>
    <span class='label'>Send</span>
    <span class='button'>&#xf1d8;</span>
While all the other icons which have to be appeared are going in starting and markup that is going to followed is:
 <div class='hide icon'>
    <span class='label'>Search</span>
    <span class='button'>&#xf002;</span>
Since the demand of animation was transform scale and their was a bit interval in each button, it should be done with Javascript. Well, jQuery animate doesn't support transform therefore I used jQuery's plugin to make that.

On notice you will find that the icons popup on a several interval, the time required on mouseenter and mouseout is same, the variable t that has current value of 1000 (milliseconds and equals to 1 second) is the total time required to popup all icons change it to have a animation of your time.

The equation to opt-out the correct time for each icon is:
Where t is total time (that is 1000ms), i is the index number (adding up 1 on mouseout) and l is the total number of icons (only with class hide) in the container. It is nothing just a calculation.


2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.