HTML

<nav>
		<menu>
			<li><a href="#" class="icon-twitter"></a></li>
			<li><a href="#" class="icon-facebook"></a></li>
			<li><a href="#" class="icon-github"></a></li>
		</menu>
</nav>

CSS

body {
  background-color : #333;
  background-image: url('http://mojoimage.com/free-image-hosting-11/12861.png');
  padding-top      : 50px;
}

nav {
  width   : 450px;
  margin  : auto;
}

menu {
  list-style-type : none;
}

li {
  display          : inline-block;
  margin-left      : 50px;
  background: rgb(62,62,62); /* Old browsers */
  background: -webkit-linear-gradient(rgba(62,62,62,1) 0%, rgba(44,44,44,1) 100%);
  background: -moz-linear-gradient(rgba(62,62,62,1) 0%, rgba(44,44,44,1) 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(62,62,62,1)), to(rgba(44,44,44,1)));

  position      : relative;
  width         : 80px;
  height        : 80px;
  border-radius : 50%;
  border        : 1px solid #222;
  text-align    : center;
}			

li:before , li:after {
  display  : block;
  content  : " ";
  position : absolute;
  z-index  : -1;
  transition : all 0.5s ease-in;
}

li:before {
  width : 90px;
  height: 2px;
  background-color: #ff0;
  left  : -5px;
  top   : 40px;
  box-shadow : 0 0 5px 1px #aa0;
}

li:after {
  width : 2px;
  height: 90px;
  background-color: #eee;
  left  : 40px;
  top   : -5px;
  box-shadow : 0 0 5px 1px #eee;
}

li:hover:after , li:hover:before {
  transform : rotate(90deg);
  transition : all 0.5s ease-out;
}

a {
  display         : block;
  text-decoration : none;
  font-size       : 40px;
  color           : #212121;
  padding         : 15px;
  border-radius   : 50%;
  text-shadow        : 0 0 5px #eee;
}

li:hover a {
  color              : #aa0;
  text-shadow        : 0 0 5px #212121;
  transition : all 0.5s ease-out;
}

Java script

دموی آنلاین

تا بارگذاری کامل کمی صبر کنید

See the Pen Steering menu by Mojtaba Seyedi (@new) on CodePen