1.ui-btn {
2  --btn-default-bg: rgb(41, 41, 41);
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: #FAC921;
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  /* 👆 this field should not be empty */
17}
18
19/* button settings 👆 */
20
21.ui-btn {
22  box-sizing: border-box;
23  padding: var(--btn-padding);
24  display: flex;
25  align-items: center;
26  justify-content: center;
27  color: var(--default-btn-color);
28  font: var(--font-weight) var(--font-size) var(--font-family);
29  background: var(--btn-default-bg);
30  border: none;
31  cursor: pointer;
32  transition: var(--btn-transition);
33  overflow: hidden;
34  box-shadow: var(--btn-shadow);
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-hover-bg);
54}
55
56.ui-btn:hover span, .ui-btn:focus span {
57  color: var(--hover-btn-color);
58}
59
60.ui-btn:hover span::before, .ui-btn:focus span::before {
61  animation: chitchat linear both var(--btn-animation-duration);
62}
63
64@keyframes chitchat {
65  0% {
66    content: "#";
67  }
68
69  5% {
70    content: ".";
71  }
72
73  10% {
74    content: "^{";
75  }
76
77  15% {
78    content: "-!";
79  }
80
81  20% {
82    content: "#$_";
83  }
84
85  25% {
86    content: "№:0";
87  }
88
89  30% {
90    content: "#{+.";
91  }
92
93  35% {
94    content: "@}-?";
95  }
96
97  40% {
98    content: "?{4@%";
99  }
100
101  45% {
102    content: "=.,^!";
103  }
104
105  50% {
106    content: "?2@%";
107  }
108
109  55% {
110    content: "\;1}]";
111  }
112
113  60% {
114    content: "?{%:%";
115    right: 0;
116  }
117
118  65% {
119    content: "|{f[4";
120    right: 0;
121  }
122
123  70% {
124    content: "{4%0%";
125    right: 0;
126  }
127
128  75% {
129    content: "'1_0<";
130    right: 0;
131  }
132
133  80% {
134    content: "{0%";
135    right: 0;
136  }
137
138  85% {
139    content: "]>'";
140    right: 0;
141  }
142
143  90% {
144    content: "4";
145    right: 0;
146  }
147
148  95% {
149    content: "2";
150    right: 0;
151  }
152
153  100% {
154    content: "";
155    right: 0;
156  }
157}