1.button {
2  width: 50px;
3  height: 50px;
4  border: none;
5  border-radius: 50%;
6  background-color: rgb(32, 32, 32);
7  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) inset;
8  display: flex;
9  align-items: center;
10  justify-content: center;
11  position: relative;
12  cursor: pointer;
13}
14
15.svgIcon {
16  z-index: 2;
17}
18
19.button::before {
20  width: 35px;
21  height: 22px;
22  background: linear-gradient(to bottom,rgba(255, 255, 255, 0.575), rgba(0, 0, 0, 0.103));
23  position: absolute;
24  content: "";
25  top: 3.6px;
26  border-radius: 50%;
27  z-index: 1;
28}
29
30.tooltip {
31  position: absolute;
32  top: -40px;
33  opacity: 0;
34  background-color: rgb(134, 134, 134);
35  color: white;
36  padding: 5px 10px;
37  border-radius: 5px;
38  display: flex;
39  align-items: center;
40  justify-content: center;
41  transition-duration: .5s;
42  pointer-events: none;
43  letter-spacing: 0.5px;
44}
45
46.button:hover .tooltip {
47  opacity: 1;
48  transition-duration: .5s;
49}
50
51.button:hover {
52  background-position: right;
53  transition-duration: 1s;
54}