JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a href="" data-tooltip="600Кб">
   <span>
     <em>Скачать</em>
     <i class="fa fa-cloud-download"></i>
   </span>
</a>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
  transition: .4s ease-in-out;
}

body {
  margin: 0;
  background: #DAF7F9;
}

a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: white;
  position: relative;
  background: #3C4896;
  display: block;
  width: 200px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid transparent;
  margin: 80px auto 0;
}

a:hover {
  background: white;
  border: 2px solid #3C4896;
}

span {
  overflow: hidden;
}

span,
em,
i.fa {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 46px;
}

em {
  top: 0;
  font-style: normal;
}

i.fa {
  top: 100%;
  font-size: 30px;
  color: #3C4896;
}

a:hover em {
  top: -100%;
}

a:hover i.fa {
  top: 0;
}

a:before,
a:after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

a:before {
  content: attr(data-tooltip);
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #3C4896;
  border-radius: 5px;
  bottom: 90px;
  left: calc(50% - 70px);
}

a:after {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #3C4896;
  bottom: 70px;
  left: calc(50% - 10px);
}

a:hover:before,
a:hover:after {
  opacity: 1;
  visibility: visible;
  transition: .2s ease-in-out .4s;

}

a:hover:before {
  bottom: 70px;
}

a:hover:after {
  bottom: 50px;

}