<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <div> <a href="#"><span>Facebook</span></a> <a href="#"><span>Twitter</span></a> <a href="#"><span>Google+</span></a> <a href="#"><span>Github</span></a> <a href="#"><span>Dribbble</span></a> <a href="#"><span>CodePen</span></a> </div>

body { background-color:#d34c65; text-align:center; } div { display: inline-block; position:absolute; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } /* Icons */ a { color:#fff; background: #DB6E82; border-radius:4px; text-align:center; text-decoration:none; font-family:fontawesome; position: relative; display: inline-block; width:40px; height:28px; padding-top:12px; margin:0 2px; -o-transition:all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; -webkit-font-smoothing: antialiased; } a:hover { background: #ef92a3; } /* pop-up text */ 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; -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* pop-up text arrow */ 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; } /* text pops up when icon is in hover state */ a:hover span { bottom:50px; visibility:visible; opacity:1; } /* font awesome icons */ a:nth-of-type(1):before { content:'\f09a'; } a:nth-of-type(2):before { content:'\f099'; } a:nth-of-type(3):before { content:'\f0d5'; } a:nth-of-type(4):before { content:'\f113'; } a:nth-of-type(5):before { content:'\f17d'; } a:nth-of-type(6):before { content:'\f1cb'; }