1/* ni means name input*/
2
3.ni {
4  font-size: 16px;
5  font-weight: 600;
6  text-decoration: none;
7  transition: all 0.3s ease;
8  padding: 8px 20px;
9  border-radius: 0.8rem;
10  min-width: 124px;
11  text-align: center;
12  background: rgba(78, 190, 150, 0.1);
13  border: 0.5px solid rgba(22, 179, 124, 0.2);
14  cursor: pointer;
15}
16
17.ni:before {
18  content: "Check";
19  color: #4ebe96;
20  transition: all 0.2s ease-in-out;
21}
22
23.ni:active {
24  transform: scale(0.94);
25  transition: all 0.2s ease-in-out;
26}
27
28#ni {
29  position: fixed;
30  opacity: 0;
31  visibility: hidden;
32}
33
34#ni:checked + .ni {
35  background: rgba(216, 79, 104, 0.1);
36  border-color: rgba(216, 79, 104, 0.2);
37}
38
39#ni:checked + .ni:before {
40  content: "Uncheck";
41  color: #d84f68;
42  transition: all 0.2s ease-in-out;
43}
44