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