Button by satyamchaudharydev

1.button {
2  --width: 100px;
3  --height: 35px;
4  --tooltip-height: 35px;
5  --tooltip-width: 90px;
6  --gap-between-tooltip-to-button: 18px;
7  --button-color: #1163ff;
8  --tooltip-color: #fff;
9  width: var(--width);
10  height: var(--height);
11  background: var(--button-color);
12  position: relative;
13  text-align: center;
14  border-radius: 0.45em;
15  font-family: "Arial";
16  transition: background 0.3s;
17}
18
19.button::before {
20  position: absolute;
21  content: attr(data-tooltip);
22  width: var(--tooltip-width);
23  height: var(--tooltip-height);
24  background-color: var(--tooltip-color);
25  font-size: 0.9rem;
26  color: #111;
27  border-radius: .25em;
28  line-height: var(--tooltip-height);
29  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);
30  left: calc(50% - var(--tooltip-width) / 2);
31}
32
33.button::after {
34  position: absolute;
35  content: '';
36  width: 0;
37  height: 0;
38  border: 10px solid transparent;
39  border-top-color: var(--tooltip-color);
40  left: calc(50% - 10px);
41  bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);
42}
43
44.button::after,.button::before {
45  opacity: 0;
46  visibility: hidden;
47  transition: all 0.5s;
48}
49
50.text {
51  display: flex;
52  align-items: center;
53  justify-content: center;
54}
55
56.button-wrapper,.text,.icon {
57  overflow: hidden;
58  position: absolute;
59  width: 100%;
60  height: 100%;
61  left: 0;
62  color: #fff;
63}
64
65.text {
66  top: 0
67}
68
69.text,.icon {
70  transition: top 0.5s;
71}
72
73.icon {
74  color: #fff;
75  top: 100%;
76  display: flex;
77  align-items: center;
78  justify-content: center;
79}
80
81.icon svg {
82  width: 24px;
83  height: 24px;
84}
85
86.button:hover {
87  background: #6c18ff;
88}
89
90.button:hover .text {
91  top: -100%;
92}
93
94.button:hover .icon {
95  top: 0;
96}
97
98.button:hover:before,.button:hover:after {
99  opacity: 1;
100  visibility: visible;
101}
102
103.button:hover:after {
104  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);
105}
106
107.button:hover:before {
108  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));
109}
110