Button by faxriddin20

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: 0.3s;
6  --btn-letter-spacing: 0.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: lime;
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,
53.ui-btn:focus {
54  background: var(--btn-hover-bg);
55}
56
57.ui-btn:hover span,
58.ui-btn:focus span {
59  color: var(--hover-btn-color);
60}
61
62.ui-btn:hover span::before,
63.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: "#{+.";}35%{content: "@}-?";
94  }
95
96  40% {
97    content: "?{4@%";
98  }
99
100  45% {
101    content: "=.,^!";
102  }
103
104  50% {
105    content: "?2@%";
106  }
107
108  55% {
109    content: "\;1}]";
110  }
111
112  60% {
113    content: "?{%:%";
114    right: 0;
115  }
116
117  65% {
118    content: "|{f[4";
119    right: 0;
120  }
121
122  70% {
123    content: "{4%0%";
124    right: 0;
125  }
126
127  75% {
128    content: "'1_0<";
129    right: 0;
130  }
131
132  80% {
133    content: "{0%";
134    right: 0;
135  }
136
137  85% {
138    content: "]>'";
139    right: 0;
140  }
141
142  90% {
143    content: "4";
144    right: 0;
145  }
146
147  95% {
148    content: "2";
149    right: 0;
150  }
151
152  100% {
153    content: "";
154    right: 0;
155  }
156}
157