HTML
<main>
<section>
<div class="center-block">
<a href="#link" class="tooltip-trigger">
<span>
<em>Download</em>
<i><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"><path fill="#ffffff" d="M26.8,14.1C26,8.9,21.4,5,16,5c-4.7,0-8.8,2.9-10.3,7.2C2.3,13.1,0,16,0,19.5c0,3.9,3,7.2,7,7.5h19
c0,0,0.1,0,0.1,0c3.3-0.3,5.9-3.2,5.9-6.5C32,17.4,29.8,14.8,26.8,14.1z M21.7,19.7l-5,5c-0.1,0.1-0.2,0.2-0.3,0.2
C16.3,25,16.1,25,16,25s-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.1-0.3-0.2l-5-5c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l3.3,3.3V13c0-0.6,0.4-1,1-1
s1,0.4,1,1v8.6l3.3-3.3c0.4-0.4,1-0.4,1.4,0S22.1,19.3,21.7,19.7z" transform="translate(0, 0)"/></svg></i>
</span>
</a>
</div>
</section>
</main>
CSS
main{
width: 100%;
height: 100%;
background: yellow;
position: relative;
color: #ffffff;
}
section{
width: 100%;
height: 100vh;
background: #212121;
position: relative;
display: table;
}
.center-block{
display:table-cell;
vertical-align: middle;
text-align: center;
}
.tooltip-trigger{
display: inline-block;
width: 240px;
height: 75px;
background: orange;
border-radius: 50em;
position: relative;
box-shadow: 0 2px 20px rgba(0,0,0,.7),
inset 0 2px 0px rgba(255,255,255, .4);
text-decoration: none;
color: inherit;
font-size: 1.3rem;
}
span, i, em{
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
span{
overflow: hidden;
}
em{
font-style: normal;
top:0;
line-height: 75px;
transition: top .2s;
}
i{
bottom: 100%;
line-height: 85px;
transition: bottom .2s;
}
.tooltip-trigger:hover em{
top: 100%;
}
.tooltip-trigger:hover i{
bottom: 0;
}
.tooltip-trigger::before{
content:'You hover this link';
width: 200Px;
height: 75px;
background: #424242;
border-radius: .2em;
bottom: 105px;
line-height: 75px;
left: calc(50% - 100px);
}
.tooltip-trigger::after{
content:'';
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #424242;
left: calc(50% - 5px);
top: -30px;
}
.tooltip-trigger::after, .tooltip-trigger::before{
position: absolute;
visibility: hidden;
transition: visibility .3s;
opacity: 0;
}
.tooltip-trigger:hover::after, .tooltip-trigger:hover::before{
visibility: visible;
opacity: 1;
}
