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: none; /* Override default button appearance */
14  background-color: rgba(
15    255,
16    255,
17    255,
18    0.1
19  ); /* Semi-transparent background for glass effect */
20  backdrop-filter: blur(10px); /* Blur effect for glassmorphism */
21  color: #fff; /* White text color */
22  cursor: pointer;
23  padding: 1.2rem 3rem;
24  font-weight: 900;
25  text-transform: uppercase;
26  display: inline-block;
27  border-radius: 999px; /* Fully rounded corners */
28  position: relative;
29  overflow: hidden;
30  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
31    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
32    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
33  font-size: 100%;
34  line-height: 1.5;
35  margin: 0;
36  border: 1px solid rgba(255, 255, 255, 0.3); /* Light border for depth */
37  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); /* Cyan glow */
38}
39
40/* Styles for disabled state */
41.btn-53:disabled {
42  cursor: default;
43}
44
45/* Focus ring for accessibility */
46.btn-53:-moz-focusring {
47  outline: auto;
48}
49
50.btn-53 svg {
51  display: block;
52  vertical-align: middle;
53}
54
55.btn-53 [hidden] {
56  display: none;
57}
58
59/* Original label styling */
60.btn-53 .original {
61  background: #000; /* Black background */
62  color: #fff; /* White color text */
63  position: absolute;
64  inset: 0;
65  display: grid;
66  place-content: center;
67  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
68}
69
70/* Hover effect to slide up the original label */
71.btn-53:hover .original {
72  transform: translateY(100%);
73}
74
75/* Container for the letters, ensuring they are centered */
76.btn-53 .letters {
77  display: flex;
78  justify-content: center;
79  height: 100%;
80}
81
82/* Initial state of letters: invisible and translated for animation */
83.btn-53 span {
84  opacity: 0;
85  transform: translateY(-100%); /* Start from above */
86  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
87  transition-delay: 0.1s;
88}
89
90/* Hover state: make letters visible and move to final position */
91.btn-53:hover span {
92  opacity: 1;
93  transform: translateY(0);
94}
95
96/* Staggered animation delays for each letter */
97.btn-53:hover span:nth-child(1) {
98  transition-delay: 0.1s;
99}
100.btn-53:hover span:nth-child(2) {
101  transition-delay: 0.2s;
102}
103/* Continue as needed for each letter */
104