Checkbox by Darlley

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  color: #fff;
30  content: "✓";
31}
32
33.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
34  .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {
35  color: #2260ff;
36}
37
38.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {
39  border-color: #2260ff;
40  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
41}
42
43.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {
44  transform: scale(1);
45  opacity: 1;
46}
47
48.checkbox-wrapper-16 .checkbox-tile {
49  display: flex;
50  flex-direction: column;
51  align-items: center;
52  justify-content: center;
53  width: 7rem;
54  min-height: 7rem;
55  border-radius: 0.5rem;
56  border: 2px solid #b5bfd9;
57  background-color: #fff;
58  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
59  transition: 0.15s ease;
60  cursor: pointer;
61  position: relative;
62}
63
64.checkbox-wrapper-16 .checkbox-tile:before {
65  content: "";
66  font-size: 12px;
67  position: absolute;
68  display: flex;
69  justify-content: center;
70  align-items: center;
71  width: 1.25rem;
72  height: 1.25rem;
73  border: 2px solid #b5bfd9;
74  border-radius: 50%;
75  top: 0.25rem;
76  left: 0.25rem;
77  opacity: 0;
78  transform: scale(0);
79  transition: 0.25s ease;
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}