Button by UpdatedAi

1.btn-53,
2.btn-53 *,
3.btn-53 :after,
4.btn-53 :before,
5.btn-53:after,
6.btn-53:before {
7  border: 0 solid;
8  box-sizing: border-box;
9}
10
11.btn-53 {
12  -webkit-tap-highlight-color: transparent;
13  -webkit-appearance: button;
14  background-color: #000;
15  color: #fff;
16  cursor: pointer;
17  padding: 1.2rem 3rem;
18  font-weight: 900;
19  text-transform: uppercase;
20  display: inline-block; /* Changed from block to inline-block for better alignment */
21  border-radius: 999px;
22  position: relative;
23  overflow: hidden;
24  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
25    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
26    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
27  font-size: 100%;
28  line-height: 1.5;
29  margin: 0;
30  border: 1px solid;
31}
32
33.btn-53:disabled {
34  cursor: default;
35}
36
37.btn-53:-moz-focusring {
38  outline: auto;
39}
40
41.btn-53 svg {
42  display: block;
43  vertical-align: middle;
44}
45
46.btn-53 [hidden] {
47  display: none;
48}
49
50.btn-53 .original {
51  background: #fff;
52  color: #000;
53  position: absolute;
54  inset: 0;
55  display: grid;
56  place-content: center;
57  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
58}
59
60.btn-53:hover .original {
61  transform: translateY(100%);
62}
63
64.btn-53 .letters {
65  display: flex;
66  justify-content: center;
67  height: 100%;
68}
69
70.btn-53 span {
71  opacity: 0;
72  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
73  transition-delay: 0.1s;
74}
75
76.btn-53:hover span {
77  opacity: 1;
78  transform: translateY(0);
79}
80
81/* Adjusted nth-child delays for sequential appearance */
82.btn-53:hover span:nth-child(1) {
83  transition-delay: 0.1s;
84}
85.btn-53:hover span:nth-child(2) {
86  transition-delay: 0.2s;
87}
88.btn-53:hover span:nth-child(3) {
89  transition-delay: 0.3s;
90}
91.btn-53:hover span:nth-child(4) {
92  transition-delay: 0.4s;
93}
94.btn-53:hover span:nth-child(5) {
95  transition-delay: 0.5s;
96}
97.btn-53:hover span:nth-child(6) {
98  transition-delay: 0.6s;
99}
100