1.cont {
2 display: flex;
3 align-items: center;
4 transform: scale(1);
5}
6
7input[type="checkbox"] {
8 height: 1.7rem;
9 width: 1.7rem;
10 margin: 5px;
11 display: inline-block;
12 appearance: none;
13 position: relative;
14 background-color: #F2ECFF;
15 border-radius: 15%;
16 cursor: pointer;
17 overflow: hidden;
18}
19
20input[type="checkbox"]::after {
21 content: '';
22 display: block;
23 height: 0.9rem;
24 width: .4rem;
25 border-bottom: .31rem solid #a0ffe7;
26 border-right: .31rem solid #a0ffe7;
27 opacity: 0;
28 transform: rotate(45deg) translate(-50%, -50%);
29 position: absolute;
30 top: 45%;
31 left: 21%;
32 transition: .25s ease;
33}
34
35input[type="checkbox"]::before {
36 content: '';
37 display: block;
38 height: 0;
39 width: 0;
40 background-color: #00C896;
41 border-radius: 50%;
42 opacity: .5;
43 transform: translate(-50%, -50%);
44 position: absolute;
45 top: 50%;
46 left: 50%;
47 transition: .3s ease;
48}
49
50input[type="checkbox"]:checked::before {
51 height: 130%;
52 width: 130%;
53 opacity: 100%;
54}
55
56input[type="checkbox"]:checked::after {
57 opacity: 100%;
58}
59
60span {
61 font-size: 2rem;
62}