Checkbox by KhaledMatalkah

1.custom-checkbox {
2  display: inline-flex;
3  align-items: center;
4  cursor: pointer;
5  user-select: none;
6  font-size: 16px;
7  color: #333;
8  transition: color 0.3s;
9}
10
11.custom-checkbox input[type="checkbox"] {
12  display: none;
13}
14
15.custom-checkbox .checkmark {
16  width: 24px;
17  height: 24px;
18  border: 2px solid #333;
19  border-radius: 4px;
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  margin-right: 10px;
24  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
25  transform-style: preserve-3d;
26}
27
28.custom-checkbox .checkmark::before {
29  content: "\2713";
30  font-size: 16px;
31  color: transparent;
32  transition: color 0.3s, transform 0.3s;
33}
34
35.custom-checkbox input[type="checkbox"]:checked + .checkmark {
36  background-color: #333;
37  border-color: #333;
38  transform: scale(1.1) rotateZ(360deg) rotateY(360deg);
39}
40
41.custom-checkbox input[type="checkbox"]:checked + .checkmark::before {
42  color: #fff;
43}
44
45.custom-checkbox:hover {
46  color: #666;
47}
48
49.custom-checkbox:hover .checkmark {
50  border-color: #666;
51  background-color: #f0f0f0;
52  transform: scale(1.05);
53}
54
55.custom-checkbox input[type="checkbox"]:focus + .checkmark {
56  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
57  outline: none;
58}
59
60.custom-checkbox .checkmark,
61.custom-checkbox input[type="checkbox"]:checked + .checkmark {
62  transition: background-color 1.3s, border-color 1.3s, color 1.3s, transform 0.3s;
63}
64