<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul class="mbm_social">
<li><a class="social-facebook" href="#">
<i class="fa fa-facebook"><small>facebook</small></i>
<div class="tooltip"><span>facebook</span></div>
</a>
</li>
<li><a class="social-twitter" href="#">
<i class="fa fa-twitter"><small>Twitter</small></i>
<div class="tooltip"><span>Twitter</span></div>
</a>
</li>
<li><a class="social-google-plus" href="#">
<i class="fa fa-google-plus"><small>google +</small></i>
<div class="tooltip"><span>google</span></div>
</a>
</li>
<li><a class="social-linkedin" href="#">
<i class="fa fa-linkedin"><small>linkedin</small></i>
<div class="tooltip"><span>linkedin</span></div>
</a>
</li>
</ul>
.mbm_social {
margin:30px 0;
padding: 25px;
font-size: 0;
float:left;
width:100%;
background:#fff;
text-align:center;
}
.mbm_social li {
display: inline-block;
list-style: outside none none;
margin: 0 8px 0 0;
padding: 0;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
.mbm_social > li:last-child {
margin: 0;
}
.mbm_social a {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
color:#fff;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 px;
width: 116px;
height: 31px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all .15s ease;
transition: all .15s ease;
z-index: 2;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mbm_social a:hover {
color: #fff;
}
.mbm_social a:hover .tooltip {
display: block;
visibility: visible;
opacity: 1;
-webkit-transform: translate(0, -33px);
transform: translate(0, -33px);
}
.mbm_social a:active {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
}
.mbm_social .tooltip {
opacity: 0;
position: absolute;
top: 2px;
left: 50%;
z-index: 1;
-webkit-transition: all .15s ease;
transition: all .15s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mbm_social .tooltip span {
font-size: 10px;
font-weight: bold;
left: -50%;
line-height: 1;
padding: 6px 8px 5px;
position: relative;
text-transform: uppercase;
z-index: 1;
}
.mbm_social .tooltip span:after {
position: absolute;
content: " ";
width: 0;
height: 0;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
}
.mbm_social .social-twitter {
background: #00abdc;
background: -webkit-linear-gradient(#00abdc, #00abdc);
background: linear-gradient(#00abdc, #00abdc);
border-bottom: 1px solid #00abdc;
}
.mbm_social .social-twitter:hover {
color: #fff;
text-shadow: 0px 1px 0px #00abdc;
}
.mbm_social .social-twitter span {
background: #00abdc ;
background: -webkit-linear-gradient(#00abdc, #00abdc);
background: linear-gradient(#00abdc, #00abdc);
color: #fff;
}
.mbm_social .social-twitter span:after {
border-top-color: #00abdc;
}
.mbm_social .social-linkedin {
background: #286580 ;
background: -webkit-linear-gradient(#286580, #286580);
background: linear-gradient(#286580, #286580);
border-bottom: 1px solid #286580;
}
.mbm_social .social-linkedin:hover {
color: #fff ;
text-shadow: 0px 1px 0px #286580;
}
.mbm_social .social-linkedin span {
background: #286580 ;
background: -webkit-linear-gradient(#286580, #286580);
background: linear-gradient(#286580, #286580);
color: #fff;
}
.mbm_social .social-linkedin span:after {
border-top-color: #286580 ;
}
.mbm_social .social-facebook {
background: #325c94 ;
background: -webkit-linear-gradient(#4562a0, #385693);
background: linear-gradient(#4562a0, #385693);
border-bottom: 1px solid #2f487c;
}
.mbm_social .social-facebook:hover {
color: #fff;
text-shadow: 0px 1px 0px #2f487c;
}
.mbm_social .social-facebook span {
background: #3b5a9b;
background: -webkit-linear-gradient(#5873aa, #3b5a9b);
background: linear-gradient(#5873aa, #3b5a9b);
color: #fff;
}
.mbm_social .social-facebook span:after {
border-top-color: #325c94;
}
.mbm_social .social-google-plus {
background: #ea4335;
background: -webkit-linear-gradient(#ea4335, #ea4335);
background: linear-gradient(#ea4335, #ea4335);
border-bottom: 1px solid #ea4335;
}
.mbm_social .social-google-plus:hover {
color: #fff ;
text-shadow: 0px 1px 0px #ea4335;
}
.mbm_social .social-google-plus span {
background: #ea4335;
background: -webkit-linear-gradient(#ea4335, #ea4335);
background: linear-gradient(#ea4335, #ea4335);
color: #fff ;
}
.mbm_social .social-google-plus span:after {
border-top-color: #ea4335 ;
}
.mbm_social i {
position: relative;
top: 1px;
font-size: 14px;
}
.mbm_social small {
font-size: 14px;
margin: 0 0 0 9px;
vertical-align: middle;
}
