1.Btn {
2  width: 45px;
3  height: 45px;
4  background: linear-gradient(#44ea76, #39fad7);
5  display: flex;
6  align-items: center;
7  justify-content: center;
8  border-radius: 50%;
9  cursor: pointer;
10  position: relative;
11  border: none;
12}
13
14.arrow path {
15  fill: white;
16}
17
18.text {
19  font-size: 0.7em;
20  width: 100px;
21  position: absolute;
22  color: white;
23  display: flex;
24  align-items: center;
25  justify-content: center;
26  bottom: -18px;
27  opacity: 0;
28  transition-duration: .7s;
29}
30
31.Btn:hover .text {
32  opacity: 1;
33  transition-duration: .7s;
34}
35
36.Btn:hover .arrow {
37  animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
38}
39
40@keyframes slide-in-bottom {
41  0% {
42    transform: translateY(10px);
43    opacity: 0;
44  }
45
46  100% {
47    transform: translateY(0);
48    opacity: 1;
49  }
50}
51