Checkbox by Bodyhc

1.checkbox-wrapper-16 *,
2  .checkbox-wrapper-16 *:after,
3  .checkbox-wrapper-16 *:before {
4  box-sizing: border-box;
5}
6
7.checkbox-wrapper-16 .checkbox-input {
8  clip: rect(0 0 0 0);
9  -webkit-clip-path: inset(100%);
10  clip-path: inset(100%);
11  height: 1px;
12  overflow: hidden;
13  position: absolute;
14  white-space: nowrap;
15  width: 1px;
16}
17
18.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
19  border-color: #2260ff;
20  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
21  color: #2260ff;
22}
23
24.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {
25  transform: scale(1);
26  opacity: 1;
27  background-color: #2260ff;
28  border-color: #2260ff;
29}
30
31.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
32  .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {
33  color: #2260ff;
34}
35
36.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {
37  border-color: #2260ff;
38  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
39}
40
41.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {
42  transform: scale(1);
43  opacity: 1;
44}
45
46.checkbox-wrapper-16 .checkbox-tile {
47  display: flex;
48  flex-direction: column;
49  align-items: center;
50  justify-content: center;
51  width: 7rem;
52  min-height: 7rem;
53  border-radius: 0.5rem;
54  border: 2px solid #b5bfd9;
55  background-color: #fff;
56  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
57  transition: 0.15s ease;
58  cursor: pointer;
59  position: relative;
60}
61
62.checkbox-wrapper-16 .checkbox-tile:before {
63  content: "";
64  position: absolute;
65  display: block;
66  width: 1.25rem;
67  height: 1.25rem;
68  border: 2px solid #b5bfd9;
69  background-color: #fff;
70  border-radius: 50%;
71  top: 0.25rem;
72  left: 0.25rem;
73  opacity: 0;
74  transform: scale(0);
75  transition: 0.25s ease;
76  background-image: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
77  background-size: 12px;
78  background-repeat: no-repeat;
79  background-position: 50% 50%;
80}
81
82.checkbox-wrapper-16 .checkbox-tile:hover {
83  border-color: #2260ff;
84}
85
86.checkbox-wrapper-16 .checkbox-tile:hover:before {
87  transform: scale(1);
88  opacity: 1;
89}
90
91.checkbox-wrapper-16 .checkbox-icon {
92  transition: 0.375s ease;
93  color: #494949;
94}
95
96.checkbox-wrapper-16 .checkbox-icon svg {
97  width: 3rem;
98  height: 3rem;
99}
100
101.checkbox-wrapper-16 .checkbox-label {
102  color: #707070;
103  transition: 0.375s ease;
104  text-align: center;
105}