Button by KapeParaguay

1.buttonpro {
2  --btn-default-bg: black;
3  --btn-padding: 15px 20px;
4  --btn-hover-bg: green;
5  --btn-transition: 0.3s;
6  --btn-letter-spacing: 0.1rem;
7  --btn-animation-duration: 1.2s;
8  --btn-shadow-color: green;
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  --font-weight: 600;
14  --font-family: Menlo, Roboto Mono, monospace;
15  border-radius: 6em;
16}
17
18/* button settings 👆 */
19
20.buttonpro {
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: 6em;
34  border: 2px solid #2a2b3a;
35}
36
37.buttonpro 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.buttonpro span::before {
46  box-sizing: border-box;
47  position: absolute;
48  content: "";
49  background: inherit;
50}
51.buttonpro:focus {
52  scale: 1.09;
53}
54.buttonpro:hover,
55.buttonpro:focus {
56  background: var(--btn-default-bg);
57  box-shadow: 0px 0px 10px 0px rgba(119, 68, 255, 0.7);
58  border: 2px solid rgb(9, 255, 0);
59}
60
61.buttonpro:hover span,
62.buttonpro:focus span {
63  color: rgb(9, 255, 0);
64}
65
66.buttonpro:hover span::before,
67.buttonpro:focus span::before {
68  animation: chitchat linear both var(--btn-animation-duration);
69}
70
71@keyframes chitchat {
72  0% {
73    content: "#";
74  }
75
76  5% {
77    content: ".";
78  }
79
80  10% {
81    content: "^{";
82  }
83
84  15% {
85    content: "-!";
86  }
87
88  20% {
89    content: "#$_";
90  }
91
92  25% {
93    content: "№:0";
94  }
95
96  30% {
97    content: "#{+.";}35%{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}
161