Tooltip by SouravBandyopadhyay

1.payment-button {
2  --background: #007bff;
3  --text-color: #fff;
4  --hover-background: #0056b3;
5  --hover-text-color: #fff;
6  --border-radius: 4px;
7  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
8
9  display: inline-block;
10  cursor: pointer;
11  font-size: 18px;
12  padding: 0.5em 1.5em;
13  background: var(--background);
14  color: var(--text-color);
15  border: none;
16  border-radius: var(--border-radius);
17  box-shadow: var(--box-shadow);
18  transition: transform 0.2s ease-in-out, background 0.3s ease-in-out,
19    color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
20  text-transform: uppercase;
21  font-weight: 600;
22  position: relative;
23  overflow: hidden;
24}
25
26.label {
27  z-index: 1;
28}
29
30.price {
31  position: absolute;
32  top: 0;
33  left: 0;
34  width: 100%;
35  height: 100%;
36  display: grid;
37  place-items: center;
38  transform-origin: 100%;
39  transform: scale(1);
40  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out,
41    background 0.3s ease-in-out;
42  color: var(--background);
43  background: var(--text-color);
44  border-radius: var(--border-radius);
45  font-weight: bold;
46  font-size: 14px;
47  overflow: hidden;
48}
49
50.payment-button:hover {
51  transform: scale(1.05);
52  background: var(--hover-background);
53  color: var(--hover-text-color);
54  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
55}
56
57.payment-button:hover .price {
58  transform: scale(0);
59}
60