Button by ZAKARIAE48CHELLE

1.Btn {
2  width: 50px;
3  height: 50px;
4  border: none;
5  border-radius: 50%;
6  background-color: rgb(27, 27, 27);
7  display: flex;
8  flex-direction: column;
9  align-items: center;
10  justify-content: center;
11  cursor: pointer;
12  position: relative;
13  transition-duration: 0.3s;
14  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
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  right: -80px;
32  opacity: 0;
33  background-color: rgb(12, 12, 12);
34  color: white;
35  padding: 5px 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  left: -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: #2196f3;
65  transition-duration: 0.3s;
66}
67
68.Btn:hover .icon2 {
69  border-bottom: 2px solid black;
70  border-left: 2px solid black;
71  border-right: 2px solid black;
72}
73
74.Btn:hover .svgIcon {
75  fill: black;
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