Button by ZAKARIAE48CHELLE

1.Btn {
2  padding: 10px;
3  width: 50px;
4  height: 50px;
5  border: none;
6  border-radius: 50%;
7  background-color: white;
8  display: flex;
9  flex-direction: column;
10  align-items: center;
11  justify-content: center;
12  cursor: pointer;
13  position: relative;
14  transition-duration: 0.3s;
15}
16
17.svgIcon {
18  fill: #2196f3;
19}
20
21.icon2 {
22  width: 18px;
23  height: 5px;
24  border-bottom: 2px solid #2196f3;
25  border-left: 2px solid #2196f3;
26  border-right: 2px solid #2196f3;
27}
28
29.tooltip {
30  position: absolute;
31  top: -50px;
32  opacity: 0;
33  background-color: rgb(12, 12, 12);
34  color: white;
35  padding: 10px 10px;
36  border-radius: 5px;
37  display: flex;
38  align-items: center;
39  justify-content: center;
40  transition-duration: 0.2s;
41  pointer-events: none;
42  letter-spacing: 0.5px;
43}
44
45.tooltip::before {
46  position: absolute;
47  content: "";
48  width: 10px;
49  height: 10px;
50  background-color: rgb(12, 12, 12);
51  background-size: 1000%;
52  background-position: center;
53  transform: rotate(45deg);
54  bottom: -5%;
55  transition-duration: 0.3s;
56}
57
58.Btn:hover .tooltip {
59  opacity: 1;
60  transition-duration: 0.3s;
61}
62
63.Btn:hover {
64  background-color: #01579b;
65  transition-duration: 0.3s;
66}
67
68.Btn:hover .icon2 {
69  border-bottom: 2px solid white;
70  border-left: 2px solid white;
71  border-right: 2px solid white;
72}
73
74.Btn:hover .svgIcon {
75  fill: white;
76  animation: slide-in-top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
77}
78
79@keyframes slide-in-top {
80  0% {
81    transform: translateY(-10px);
82    opacity: 0;
83  }
84
85  100% {
86    transform: translateY(0px);
87    opacity: 1;
88  }
89}
90