HTML
<ul class="nav">
<li><a href="#" title="comment" class="nav-item border-left"><i class="fa fa-comment-o"></i></a></li>
<li><a href="#" title="camera" class="nav-item"><i class="fa fa-camera"></i></a></li>
<li><a href="#" title="heart" class="nav-item"><i class="fa fa-heart-o"></i></a></li>
<li><a href="#" title="circle" class="nav-item border-right"><i class="fa fa-dot-circle-o"></i></a></li>
</ul>
CSS
html, body{
height: 100%;
}
body{
height: calc(100% - 300px);
background: #b8b5c1;
background: -moz-linear-gradient(top, #b8b5c1 0%, #7b738e 100%);
background: -webkit-linear-gradient(top, #b8b5c1 0%,#7b738e 100%);
background: linear-gradient(to bottom, #b8b5c1 0%,#7b738e 100%); progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8b5c1', endColorstr='#7b738e',GradientType=0 );
}
.nav{
display: table;
padding:0;
margin: 10% auto;
border-radius: 20px;
-webkit-box-shadow: 0px 10px 19px 0px rgba(99,93,116,1);
-moz-box-shadow: 0px 10px 19px 0px rgba(99,93,116,1);
box-shadow: 0px 10px 19px 0px rgba(99,93,116,1);
}
.nav li{
display:inline;
}
.nav-item{
display: block;
width: 156px;
height: 96px;
float: left;
font-size: 55px;
text-decoration:none;
color: #656075;
text-align: center;
text-shadow: 0px 2px 3px #FFF;
border-top: 2px solid #e9e9ed;
border-right: 2px solid #d2d2db;
border-left: 2px solid #b3b3c3;
background: #c8c8d3;
background: -moz-linear-gradient(top, #c8c8d3 1%, #b9baca 100%);
background: -webkit-linear-gradient(top, #c8c8d3 1%,#b9baca 100%);
background: linear-gradient(to bottom, #c8c8d3 1%,#b9baca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8d3', endColorstr='#b9baca',GradientType=0 ); /* IE6-9 */
}
.nav-item i{
line-height: 96px;
}
.nav-item:hover{
cursor:pointer;
border-top: 2px solid #d2d2dc;
color:#e6e6e6;
text-shadow: 0px 2px 3px #595566;
border-right: 2px solid #7e7e94;
border-left: 2px solid #7e7e94;
background: #b2b3c4;
background: -moz-radial-gradient(center, ellipse cover, #b2b3c4 0%, #9393a8 99%);
background: -webkit-radial-gradient(center, ellipse cover, #b2b3c4 0%,#9393a8 99%);
background: radial-gradient(ellipse at center, #b2b3c4 0%,#9393a8 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b3c4', endColorstr='#9393a8',GradientType=1 );
}
.border-left{
border-left: none;
border-radius: 10px 0 0 10px;
}
.border-left:hover{
border-left: none;
}
.border-right{
border-right: none;
border-radius: 0 10px 10px 0;
}
.border-right:hover{
border-right: none;
}
