1.checkmark {
2 display: block;
3 width: 30px;
4 height: 30px;
5 background-color: #ddd;
6 border-radius: 10px;
7 position: relative;
8 transition: background-color 0.4s;
9 overflow: hidden;
10 cursor: pointer;
11}
12
13#check:checked ~ .checkmark {
14 background-color: #08bb68;
15}
16
17.checkmark::after {
18 content: "";
19 position: absolute;
20 width: 5px;
21 height: 10px;
22 border-right: 3px solid #fff;
23 border-bottom: 3px solid #fff;
24 top: 44%;
25 left: 50%;
26 transform: translate(-50%, -50%) rotateZ(40deg) scale(10);
27 opacity: 0;
28 transition: all 0.4s;
29}
30
31#check:checked ~ .checkmark::after {
32 opacity: 1;
33 transform: translate(-50%, -50%) rotateZ(40deg) scale(1);
34}