Button by devanshsatwara

1.ui-btn {
2  --btn-default-bg: #010314;
3  --btn-padding: 15px 20px;
4  --btn-hover-bg: rgb(51, 51, 51);
5  --btn-transition: .3s;
6  --btn-letter-spacing: .1rem;
7  --btn-animation-duration: 1.2s;
8  --btn-shadow-color: rgba(0, 0, 0, 0.137);
9  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
10  --hover-btn-color: #7241FF;
11  --default-btn-color: #fff;
12  --font-size: 16px;
13  /* 👆 this field should not be empty */
14  --font-weight: 600;
15  --font-family: Menlo,Roboto Mono,monospace;
16}
17
18/* button settings 👆 */
19
20.ui-btn {
21  box-sizing: border-box;
22  padding: var(--btn-padding);
23  display: flex;
24  align-items: center;
25  justify-content: center;
26  color: var(--default-btn-color);
27  font: var(--font-weight) var(--font-size) var(--font-family);
28  background: var(--btn-default-bg);
29  cursor: pointer;
30  transition: var(--btn-transition);
31  overflow: hidden;
32  box-shadow: var(--btn-shadow);
33  border-radius: 10px;
34  border: 2px solid #2A2B3A;
35}
36
37.ui-btn span {
38  letter-spacing: var(--btn-letter-spacing);
39  transition: var(--btn-transition);
40  box-sizing: border-box;
41  position: relative;
42  background: inherit;
43}
44
45.ui-btn span::before {
46  box-sizing: border-box;
47  position: absolute;
48  content: "";
49  background: inherit;
50}
51
52.ui-btn:hover, .ui-btn:focus {
53  background: var(--btn-default-bg);
54  box-shadow: 0px 0px 10px 0px rgba(119, 68, 255, 0.70);
55  border: 2px solid #7241FF;
56  ;
57}
58
59.ui-btn:hover span, .ui-btn:focus span {
60  color: var(--hover-btn-color);
61}
62
63.ui-btn:hover span::before, .ui-btn:focus span::before {
64  animation: chitchat linear both var(--btn-animation-duration);
65}
66
67@keyframes chitchat {
68  0% {
69    content: "#";
70  }
71
72  5% {
73    content: ".";
74  }
75
76  10% {
77    content: "^{";
78  }
79
80  15% {
81    content: "-!";
82  }
83
84  20% {
85    content: "#$_";
86  }
87
88  25% {
89    content: "№:0";
90  }
91
92  30% {
93    content: "#{+.";
94  }
95
96  35% {
97    content: "@}-?";
98  }
99
100  40% {
101    content: "?{4@%";
102  }
103
104  45% {
105    content: "=.,^!";
106  }
107
108  50% {
109    content: "?2@%";
110  }
111
112  55% {
113    content: "\;1}]";
114  }
115
116  60% {
117    content: "?{%:%";
118    right: 0;
119  }
120
121  65% {
122    content: "|{f[4";
123    right: 0;
124  }
125
126  70% {
127    content: "{4%0%";
128    right: 0;
129  }
130
131  75% {
132    content: "'1_0<";
133    right: 0;
134  }
135
136  80% {
137    content: "{0%";
138    right: 0;
139  }
140
141  85% {
142    content: "]>'";
143    right: 0;
144  }
145
146  90% {
147    content: "4";
148    right: 0;
149  }
150
151  95% {
152    content: "2";
153    right: 0;
154  }
155
156  100% {
157    content: "";
158    right: 0;
159  }
160}