Button by SelfMadeSystem

1:focus {
2  outline: none;
3}
4::-moz-focus-inner {
5  border: 0;
6}
7
8.border {
9  position: relative;
10  cursor: pointer;
11  padding: 3px;
12  border-radius: calc(6pt + 3px);
13  appearance: none;
14  font-weight: 600;
15  background: linear-gradient(#dfe1e0, #7f8180);
16  border: 1pt solid #e9ebea;
17  border-top-width: 0;
18  box-shadow: 0px 5px 15px 0px #0004;
19  transition: all 0.4s;
20}
21
22.border::before {
23  content: "";
24  position: absolute;
25  bottom: 0px;
26  left: 0;
27  right: 0;
28  height: 50%;
29  transition: inherit;
30}
31
32.border:hover {
33  transform: translateY(-5px);
34  box-shadow: 0px 10px 15px 0px #0004;
35}
36
37.border:hover:not(:active)::before {
38  bottom: -6px;
39}
40
41.border:active {
42  transform: translateY(0px);
43  box-shadow: 0px 5px 15px 0px #0000;
44  transition: all 0.3s;
45}
46
47.outer {
48  padding: 4pt;
49  background: linear-gradient(#fdfffe, #eceeed, #fdfffe);
50  border-radius: 6pt;
51}
52
53.inner {
54  background: linear-gradient(#eef0ef, #fafcfb, #eef0ef);
55  padding: 8pt;
56  border-radius: 9999px;
57  display: flex;
58  align-items: center;
59  gap: 4pt;
60  text-shadow: 0px 1px 1px #0004;
61}
62
63.inner svg {
64  filter: drop-shadow(0px 1px 0px #0007);
65}
66
67:is(.inner, .outer) {
68  background-size: 100% 200%;
69  transition: background-position-y 0.5s;
70}
71
72:active :is(.inner, .outer) {
73  background-position-y: 100%;
74}
75