Button by Praashoo7

1/* Teenage Engineering [EP-133 K.O. II] - Buttons */
2
3.main {
4  display: flex;
5  flex-direction: column;
6  align-items: center;
7  justify-content: center;
8  row-gap: 1.25em;
9}
10
11.buttons {
12  display: flex;
13  flex-direction: column;
14  row-gap: 1.5em;
15}
16.button_pair {
17  display: flex;
18  column-gap: 1.5em;
19}
20.button_pair1 {
21  display: flex;
22  flex-direction: column;
23  row-gap: 0.9em;
24}
25
26.btn {
27  display: flex;
28  align-items: center;
29  justify-content: center;
30  width: 5em;
31  height: 5em;
32  background-color: #171717;
33  border-radius: 5px;
34}
35
36.button1 {
37  width: 5.7em;
38  height: 5.7em;
39  border-radius: 10px;
40  border: none;
41  outline: none;
42  background-color: #c7c3c0;
43  box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,
44    #ffffff 1.5px 1.5px 2px 0px inset, #c7c3c0 -3.2px -3.2px 8px 0px inset;
45  cursor: pointer;
46  font-family: Montserrat;
47  transition: 0.1s ease-in-out;
48}
49.button2 {
50  width: 5.7em;
51  height: 5.7em;
52  border-radius: 10px;
53  border: none;
54  outline: none;
55  background-color: #c7c3c0;
56  box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,
57    #ffffff 1.5px 1.5px 2px 0px inset, #c7c3c0 -3.2px -3.2px 8px 0px inset;
58  cursor: pointer;
59  font-family: Montserrat;
60  transition: 0.1s ease-in-out;
61}
62.svg1 {
63  fill: #5f5f5f;
64  width: 25px;
65  height: 25px;
66  transition: 0.1s ease-in-out;
67}
68.svg2 {
69  fill: #5f5f5f;
70  width: 25px;
71  height: 25px;
72  transition: 0.1s ease-in-out;
73}
74
75.button3 {
76  display: flex;
77  align-items: flex-start;
78  justify-content: center;
79  width: 5.7em;
80  height: 5.7em;
81  border-radius: 10px;
82  border: none;
83  outline: none;
84  background-color: #d42a02;
85  box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px, #fb702c 2px 2px 10px 0px inset,
86    #d42a02 -4px -4px 1px 0px inset;
87  cursor: pointer;
88  font-family: Montserrat;
89  transition: 0.1s ease-in-out;
90}
91.button4 {
92  display: flex;
93  align-items: flex-start;
94  justify-content: center;
95  width: 5.7em;
96  height: 5.7em;
97  border-radius: 10px;
98  border: none;
99  outline: none;
100  background-color: #545251;
101  box-shadow: rgba(0, 0, 0, 0.377) 10px 10px 8px,
102    #a8a6a4 1.5px 1.5px 1px 0px inset, #545251 -3.2px -3.2px 8px 0px inset;
103  cursor: pointer;
104  font-family: Montserrat;
105  transition: 0.1s ease-in-out;
106}
107
108.button_text {
109  color: white;
110  padding-top: 0.9em;
111  letter-spacing: 0.075em;
112  font-size: 0.85em;
113  transition: 0.1s ease-in-out;
114}
115
116.text {
117  font-family: Montserrat;
118  text-align: center;
119  font-size: 0.65em;
120}
121
122.button1:active,
123.button2:active {
124  box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,
125    #c7c3c0 -3.2px -3.2px 8px 0px inset;
126}
127.button1:active .svg1,
128.button2:active .svg2 {
129  scale: 0.95;
130}
131.button3:active {
132  box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,
133    #d42a02 -3.2px -3.2px 8px 0px inset;
134}
135.button3:active .button_text {
136  transform: translateY(0.5px);
137}
138.button4:active {
139  box-shadow: rgba(0, 0, 0, 0.377) 0px 0px 0px, inset 0.5px 0.5px 4px #000000,
140    #545251 -3.2px -3.2px 8px 0px inset;
141}
142.button4:active .button_text {
143  transform: translateY(0.5px);
144}
145