HTML
<div>
<a href="#">
<i class="fa fa-facebook" aria-hidden="true">
<span>Facebook</span>
</i>
</a>
<a href="#">
<i class="fa fa-twitter" aria-hidden="true">
<span>Twitter</span>
</i>
</a>
<a href="#">
<i class="fa fa-pinterest" aria-hidden="true">
<span>Pinterest</span>
</i>
</a>
<a href="#">
<i class="fa fa-tumblr" aria-hidden="true">
<span>Tumblr</span>
</i>
</a>
</div>
SCSS
body {
background-color: darken(#2980b9, 10%);
text-align: center;
}
div {
display: inline-flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
a {
color: #fff;
background: lighten(#3498db, 10%);
border-radius: 4px;
text-align: center;
text-decoration: none;
position: relative;
display: inline-block;
width: 40px;
height: 40px;
padding-top: 12px;
margin: 0 14px;
transition: all .5s;
box-sizing: border-box;
}
a:hover {
background: darken(#3498db, 2%);
}
a span {
color: #666;
position: absolute;
font-family: sans-serif;
bottom: 0;
left: -25px;
right: -25px;
padding: 5px 7px;
z-index: -1;
font-size: 14px;
border-radius: 2px;
background: #fff;
visibility: hidden;
opacity: 0;
transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
a span:before {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
position: absolute;
bottom: -5px;
left: 40px;
}
a:hover span {
bottom: 50px;
visibility: visible;
opacity: 1;
}
