Button by adamgiebl

1.button {
2  align-items: center;
3  appearance: none;
4  background-color: #EEF2FF;
5  border-radius: 8px;
6  border-width: 2px;
7  border-color: #536DFE;
8  box-shadow: rgba(83, 109, 254, 0.2) 0 2px 4px, rgba(83, 109, 254, 0.15) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
9  box-sizing: border-box;
10  color: #536DFE;
11  cursor: pointer;
12  display: inline-flex;
13  font-family: "JetBrains Mono", monospace;
14  height: 56px;
15  justify-content: center;
16  line-height: 1;
17  list-style: none;
18  overflow: hidden;
19  padding-left: 24px;
20  padding-right: 24px;
21  position: relative;
22  text-align: center;
23  text-decoration: none;
24  transition: box-shadow 0.15s, transform 0.15s;
25  user-select: none;
26  -webkit-user-select: none;
27  touch-action: manipulation;
28  white-space: nowrap;
29  will-change: box-shadow, transform;
30  font-size: 20px;
31}
32
33.button:focus {
34  outline: none;
35  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(83, 109, 254, 0.4) 0 2px 4px, rgba(83, 109, 254, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
36}
37
38.button:hover {
39  box-shadow: rgba(83, 109, 254, 0.3) 0 4px 8px, rgba(83, 109, 254, 0.2) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
40  transform: translateY(-2px);
41}
42
43.button:active {
44  box-shadow: #D6D6E7 0 3px 7px inset;
45  transform: translateY(2px);
46}