Button by mrhyddenn

1.uiverse {
2  position: relative;
3  background: #ffffff;
4  color: #000;
5  padding: 15px;
6  margin: 10px;
7  border-radius: 10px;
8  width: 150px;
9  height: 50px;
10  font-size: 17px;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  flex-direction: column;
15  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
16  cursor: pointer;
17  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
18}
19
20.tooltip {
21  position: absolute;
22  top: 0;
23  font-size: 14px;
24  background: #ffffff;
25  color: #ffffff;
26  padding: 5px 8px;
27  border-radius: 5px;
28  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
29  opacity: 0;
30  pointer-events: none;
31  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
32}
33
34.tooltip::before {
35  position: absolute;
36  content: "";
37  height: 8px;
38  width: 8px;
39  background: #ffffff;
40  bottom: -3px;
41  left: 50%;
42  transform: translate(-50%) rotate(45deg);
43  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
44}
45
46.uiverse:hover .tooltip {
47  top: -45px;
48  opacity: 1;
49  visibility: visible;
50  pointer-events: auto;
51}
52
53svg:hover span,
54svg:hover .tooltip {
55  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
56}
57
58.uiverse:hover,
59.uiverse:hover .tooltip,
60.uiverse:hover .tooltip::before {
61  background: linear-gradient(320deg, rgb(3, 77, 146), rgb(0, 60, 255));
62  color: #ffffff;
63}