css3 animation circle button

As we know how powerful the CSS3 is ,this demo can be used for menu of the site or or share button animation.

html

First, we need link the bootstrap for layout easier and font-awesome for the social logo.
I got from cdn library online.

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css

 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

 Then forward to the body of HTML.

html

The navbar contains the circle in the middle and the small buttons surround it,such as the old style dial phone.
The section named menu is an unordered list with nine list items which is linked to associate logos. Each logo classed the special names according to font-awesome rules.

css

The navbar's position is relative for all the menu and list items.And the background is an image which is changing opacity when hovering on it. All the navbar and menulists are circle shape because of border-radius. Bulid the wide border to set the list items surround the main button.  The menu should be narrow to invisible using transform scale.

css

When the menu is hovered, the list items jump up and make it at the top layer.
The list item gets the absolute position and original position before transform which is in the center of the navbar main button.

Tag <a> is the logo which also the circle and small size.

css

css

The animation is running one by one that we have to set every logo a transition-delay which 0.02s everytime. Meanwhile the logo rotates 40 degrees more each.
For more splendid transitions, giving the logo inside rotate and delay too.