1.checker {
2  display: block;
3  font-size: 25px;
4  height: 1em;
5  width: 2.5em;
6  box-sizing: content-box;
7  padding: 0.15em;
8  border-radius: 0.25em;
9  cursor: pointer;
10}
11
12.checkmark {
13  width: 1em;
14  height: 1em;
15  transform: translateX(-0.4em);
16  z-index: 5;
17}
18
19.checkmark svg {
20  display: block;
21  background: #e5e5e5;
22  transform: translateX(0.4em);
23  border-radius: 0.15em;
24  transition: background-color var(--duration) ease, transform calc(var(--duration) * 1.5) ease;
25}
26
27.checkmark svg path {
28  stroke-dasharray: 90 90;
29  stroke-dashoffset: 90;
30  transition: stroke-dashoffset calc(var(--duration) / 3) linear calc(var(--duration) / 3);
31}
32
33.checkbox {
34  position: absolute;
35  top: 0;
36  left: 0;
37  opacity: 0.4;
38  visibility: hidden;
39}
40
41.checkbox:checked ~ .checkmark {
42  transform: translate(1.9em);
43}
44
45.checkbox:checked ~ .checkmark svg {
46  background: #77c44c;
47  transform: translate(-0.4em);
48}
49
50.checkbox:checked ~ .checkmark svg path {
51  stroke-dashoffset: 0;
52}
53
54.check-bg {
55  position: absolute;
56  top: 0;
57  left: 0;
58  width: 100%;
59  height: 100%;
60  border-radius: inherit;
61  background: white;
62  z-index: 2;
63}
64
65.check-bg:before, .check-bg:after {
66  content: "";
67  position: absolute;
68  top: 0;
69  left: 0;
70  height: 100%;
71  width: 100%;
72  border-radius: inherit;
73}
74
75.check-bg:after {
76  background: white;
77}
78
79.check-bg:before {
80  transform: translateY(30%);
81  transform-origin: bottom center;
82  background: black;
83  filter: blur(0.25em);
84  opacity: 0.2;
85  z-index: -1;
86}
87
88.checker.checker:active {
89  transform: scale(0.85);
90  transition-duration: calc(var(--duration) / 2);
91}
92
93.checker.checker:active .check-bg::before {
94  transform: translateY(0) scale(0.8);
95  opacity: 0.2;
96}
97
98*,
99*::before,
100*::after {
101  box-sizing: border-box;
102  position: relative;
103}
104
105html {
106  height: 100%;
107}
108
109body {
110  background-color: #f2f2f2;
111  height: 100%;
112  width: 100%;
113  display: flex;
114  justify-content: center;
115  align-items: center;
116}