1.Btn {
2  width: 45px;
3  height: 45px;
4  border: none;
5  border-radius: 50%;
6  background: linear-gradient(-50deg,rgb(39, 107, 255),rgb(112, 186, 255),rgb(39, 107, 255));
7  background-size: 250%;
8  background-position: left;
9  display: flex;
10  align-items: center;
11  justify-content: center;
12  cursor: pointer;
13  position: relative;
14  transition-duration: .5s;
15  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
16}
17
18.logoIcon {
19  fill: white;
20}
21
22.tooltip {
23  position: absolute;
24  top: -20px;
25  opacity: 0;
26  background: linear-gradient(to right,rgb(39, 107, 255),rgb(108, 184, 255));
27  color: white;
28  padding: 5px 10px;
29  border-radius: 5px;
30  display: flex;
31  align-items: center;
32  justify-content: center;
33  transition-duration: .2s;
34  pointer-events: none;
35  letter-spacing: 0.5px;
36}
37
38.tooltip::before {
39  position: absolute;
40  content: "";
41  width: 10px;
42  height: 10px;
43  background: linear-gradient(45deg,rgb(39, 107, 255),rgb(108, 184, 255));
44  background-size: 1000%;
45  background-position: center;
46  transform: rotate(45deg);
47  bottom: -15%;
48  transition-duration: .3s;
49}
50
51.Btn:hover .tooltip {
52  top: -50px;
53  opacity: 1;
54  transition-duration: .3s;
55}
56
57.Btn:hover {
58  background-position: right;
59  transition-duration: .5s;
60}