Checkbox by elijahgummer

1/* Hide the default checkbox */
2.container input {
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  position: absolute;
7  opacity: 0;
8  cursor: pointer;
9  height: 0;
10  width: 0;
11}
12
13.container {
14  display: block;
15  position: relative;
16  cursor: pointer;
17  font-size: 20px;
18  user-select: none;
19  border: 3px solid #beddd0;
20  border-radius: 10px;
21  overflow: hidden;
22}
23
24/* Create a custom checkbox */
25.checkmark {
26  position: relative;
27  top: 0;
28  left: 0;
29  height: 1.3em;
30  width: 1.3em;
31  background-color: #2dc38c;
32  border-bottom: 1.5px solid #2dc38c; /* Bottom stroke */
33  box-shadow: 0 0 1px #cef1e4, inset 0 -2.5px 3px #62eab8,
34    inset 0 3px 3px rgba(0, 0, 0, 0.34); /* Inner shadow */
35  border-radius: 8px;
36  transition: transform 0.3s ease-in-out; /* Transition for smooth animation */
37}
38
39/* When the checkbox is checked, modify the checkmark appearance */
40.container input:checked ~ .checkmark {
41  transform: translateY(40px); /* Move down */
42  animation: wipeDown 0.6s ease-in-out forwards; /* Apply wipe animation */
43}
44
45/* When the checkbox is not checked, modify the checkmark appearance */
46.container input:not(:checked) ~ .checkmark {
47  transform: translateY(-40px); /* Move up */
48  animation: wipeUp 0.6s ease-in-out forwards; /* Apply wipe animation */
49}
50
51/* Keyframes for wipe animations */
52@keyframes wipeDown {
53  0% {
54    transform: translateY(0); /* Starting position */
55  }
56  100% {
57    transform: translateY(40px); /* End position */
58  }
59}
60
61@keyframes wipeUp {
62  0% {
63    transform: translateY(40); /* Starting position */
64  }
65  100% {
66    transform: translateY(0px); /* End position */
67  }
68}
69
70/* Create the checkmark/indicator */
71.checkmark:after {
72  content: "";
73  position: absolute;
74  display: none;
75}
76
77/* Show the checkmark when checked */
78.container input:checked ~ .checkmark:after {
79  display: block;
80}
81
82/* Style the checkmark/indicator */
83.container .checkmark:before {
84  content: "";
85  position: absolute;
86  left: 10px;
87  top: 4px;
88  width: 5px;
89  height: 10px;
90  border: solid white;
91  border-width: 0 2px 2px 0;
92  transform: rotate(45deg);
93  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.34); /* Icon drop shadow */
94}
95