1/* Customize the label (the checkbox-btn) */
2.checkbox-btn {
3  display: block;
4  position: relative;
5  padding-left: 30px;
6  margin-bottom: 10px;
7  cursor: pointer;
8  -webkit-user-select: none;
9  -moz-user-select: none;
10  -ms-user-select: none;
11  user-select: none;
12}
13
14/* Hide the browser's default checkbox */
15.checkbox-btn input {
16  position: absolute;
17  opacity: 0;
18  cursor: pointer;
19  height: 0;
20  width: 0;
21}
22
23.checkbox-btn label {
24  cursor: pointer;
25  font-size: 14px;
26}
27/* Create a custom checkbox */
28.checkmark {
29  position: absolute;
30  top: 0;
31  left: 0;
32  height: 25px;
33  width: 25px;
34  border: 2.5px solid #ffffff;
35  transition: .2s linear;
36}
37.checkbox-btn input:checked ~ .checkmark {
38  background-color: transparent;
39}
40
41/* Create the checkmark/indicator (hidden when not checked) */
42.checkmark:after {
43  content: "";
44  position: absolute;
45  visibility: hidden;
46  opacity: 0;
47  left: 50%;
48  top: 40%;
49  width: 10px;
50  height: 14px;
51  border: 2px solid #0ea021;
52  filter: drop-shadow(0px 0px 10px #0ea021);
53  border-width: 0 2.5px 2.5px 0;
54  transition: .2s linear;
55  transform: translate(-50%, -50%) rotate(-90deg) scale(0.2);
56}
57
58/* Show the checkmark when checked */
59.checkbox-btn input:checked ~ .checkmark:after {
60  visibility: visible;
61  opacity: 1;
62  transform: translate(-50%, -50%) rotate(0deg) scale(1);
63  animation: pulse 1s ease-in;
64}
65
66.checkbox-btn input:checked ~ .checkmark {
67  transform: rotate(45deg);
68  border: none;
69}
70
71@keyframes pulse {
72  0%,
73  100% {
74    transform: translate(-50%, -50%) rotate(0deg) scale(1);
75  }
76  50% {
77    transform: translate(-50%, -50%) rotate(0deg) scale(1.6);
78  }
79}
80
81