Button by SelfMadeSystem

1.btn {
2  margin: 0.5rem;
3  padding: 0.5rem 0.75rem;
4  border-radius: 0.5rem;
5  border: none;
6  font-weight: 600;
7  cursor: pointer;
8}
9
10.btn kbd {
11  margin: 0.25rem;
12  padding: 0.125rem 0.5rem;
13  border-radius: 0.25rem;
14}
15
16.btn-primary {
17  background: linear-gradient(#1f5afe, #0f4cf5);
18  color: white;
19  box-shadow: inset 0pt 4pt 3pt -2pt #386fff, 0pt 4pt 5pt -3pt #0009;
20  border-bottom: 2pt solid #083acd;
21  transition: all 0.5s ease;
22}
23
24.btn-primary:hover {
25  border-bottom: 4pt solid #083acd;
26  translate: 0pt -1pt;
27}
28
29.btn-primary:active {
30  box-shadow: inset 0pt 4pt 3pt -2pt #386fff, 0pt 4pt 5pt -3pt #0000;
31  border-bottom: 1pt solid #083acd;
32  translate: 0pt 0pt;
33}
34
35.btn-primary kbd {
36  background-color: #3e6eff;
37  box-shadow: inset 0pt -3pt 3pt -2pt #1f54f0, inset 0pt 3pt 3pt -2pt #658dff,
38    0pt 2pt 2pt -2pt #0005, 0pt 0pt 0pt 2pt #0d47f0;
39}
40
41.btn-base {
42  background: #386fff;
43}
44