Checkbox by della11

#212121

1#checklist {
2  --background: #303952;
3  --text: #5d6474;
4  --check: #cc29f0;
5  --disabled: #d3c8de;
6  --width: 100px;
7  --height: 180px;
8  --border-radius: 10px;
9  background: var(--background);
10  width: var(--width);
11  height: var(--height);
12  border-radius: var(--border-radius);
13  position: relative;
14  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
15  padding: 30px 85px;
16  display: grid;
17  grid-template-columns: 30px auto;
18  align-items: center;
19  justify-content: center;
20}
21
22#checklist label {
23  color: var(--text);
24  position: relative;
25  cursor: pointer;
26  display: grid;
27  align-items: center;
28  width: fit-content;
29  transition: color 0.3s ease;
30  margin-right: 20px;
31}
32
33#checklist label::before,
34#checklist label::after {
35  content: "";
36  position: absolute;
37}
38
39#checklist label::before {
40  height: 2px;
41  width: 8px;
42  left: -27px;
43  background: var(--check);
44  border-radius: 2px;
45  transition: background 0.3s ease;
46}
47
48#checklist label:after {
49  height: 4px;
50  width: 4px;
51  top: 8px;
52  left: -25px;
53  border-radius: 50%;
54}
55
56#checklist input[type="checkbox"] {
57  -webkit-appearance: none;
58  -moz-appearance: none;
59  position: relative;
60  height: 15px;
61  width: 15px;
62  outline: none;
63  border: 0;
64  margin: 0 15px 0 0;
65  cursor: pointer;
66  background: var(--background);
67  display: grid;
68  align-items: center;
69  margin-right: 20px;
70}
71
72#checklist input[type="checkbox"]::before,
73#checklist input[type="checkbox"]::after {
74  content: "";
75  position: absolute;
76  height: 2px;
77  top: auto;
78  background: var(--check);
79  border-radius: 2px;
80}
81
82#checklist input[type="checkbox"]::before {
83  width: 0px;
84  right: 60%;
85  transform-origin: right bottom;
86}
87
88#checklist input[type="checkbox"]::after {
89  width: 0px;
90  left: 40%;
91  transform-origin: left bottom;
92}
93
94#checklist input[type="checkbox"]:checked::before {
95  animation: check-01 0.4s ease forwards;
96}
97
98#checklist input[type="checkbox"]:checked::after {
99  animation: check-02 0.4s ease forwards;
100}
101
102#checklist input[type="checkbox"]:checked + label {
103  color: var(--disabled);
104  animation: move 0.3s ease 0.1s forwards;
105}
106
107#checklist input[type="checkbox"]:checked + label::before {
108  background: var(--disabled);
109  animation: slice 0.4s ease forwards;
110}
111
112#checklist input[type="checkbox"]:checked + label::after {
113  animation: firework 0.5s ease forwards 0.1s;
114}
115
116@keyframes move {
117  50% {
118    padding-left: 8px;
119    padding-right: 0px;
120  }
121
122  100% {
123    padding-right: 4px;
124  }
125}
126
127@keyframes slice {
128  60% {
129    width: 100%;
130    left: 4px;
131  }
132
133  100% {
134    width: 100%;
135    left: -2px;
136    padding-left: 0;
137  }
138}
139
140@keyframes check-01 {
141  0% {
142    width: 4px;
143    top: auto;
144    transform: rotate(0);
145  }
146
147  50% {
148    width: 0px;
149    top: auto;
150    transform: rotate(0);
151  }
152
153  51% {
154    width: 0px;
155    top: 8px;
156    transform: rotate(45deg);
157  }
158
159  100% {
160    width: 5px;
161    top: 8px;
162    transform: rotate(45deg);
163  }
164}
165
166@keyframes check-02 {
167  0% {
168    width: 4px;
169    top: auto;
170    transform: rotate(0);
171  }
172
173  50% {
174    width: 0px;
175    top: auto;
176    transform: rotate(0);
177  }
178
179  51% {
180    width: 0px;
181    top: 8px;
182    transform: rotate(-45deg);
183  }
184
185  100% {
186    width: 10px;
187    top: 8px;
188    transform: rotate(-45deg);
189  }
190}
191
192@keyframes firework {
193  0% {
194    opacity: 1;
195    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0,
196      0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
197  }
198
199  30% {
200    opacity: 1;
201  }
202
203  100% {
204    opacity: 0;
205    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0,
206      14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0,
207      -14px -8px 0 0px #4f29f0;
208  }
209}
210

#checklist {
  --background: #303952;
  --text: #5d6474;
  --check: #cc29f0;
  --disabled: #d3c8de;
  --width: 100px;
  --height: 180px;
  --border-radius: 10px;
  background: var(--background);
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  position: relative;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  padding: 30px 85px;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  justify-content: center;
}

#checklist label {
  color: var(--text);
  position: relative;
  cursor: pointer;
  display: grid;
  align-items: center;
  width: fit-content;
  transition: color 0.3s ease;
  margin-right: 20px;
}

#checklist label::before,
#checklist label::after {
  content: "";
  position: absolute;
}

#checklist label::before {
  height: 2px;
  width: 8px;
  left: -27px;
  background: var(--check);
  border-radius: 2px;
  transition: background 0.3s ease;
}

#checklist label:after {
  height: 4px;
  width: 4px;
  top: 8px;
  left: -25px;
  border-radius: 50%;
}

#checklist input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: 15px;
  width: 15px;
  outline: none;
  border: 0;
  margin: 0 15px 0 0;
  cursor: pointer;
  background: var(--background);
  display: grid;
  align-items: center;
  margin-right: 20px;
}

#checklist input[type="checkbox"]::before,
#checklist input[type="checkbox"]::after {
  content: "";
  position: absolute;
  height: 2px;
  top: auto;
  background: var(--check);
  border-radius: 2px;
}

#checklist input[type="checkbox"]::before {
  width: 0px;
  right: 60%;
  transform-origin: right bottom;
}

#checklist input[type="checkbox"]::after {
  width: 0px;
  left: 40%;
  transform-origin: left bottom;
}

#checklist input[type="checkbox"]:checked::before {
  animation: check-01 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked::after {
  animation: check-02 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked + label {
  color: var(--disabled);
  animation: move 0.3s ease 0.1s forwards;
}

#checklist input[type="checkbox"]:checked + label::before {
  background: var(--disabled);
  animation: slice 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked + label::after {
  animation: firework 0.5s ease forwards 0.1s;
}

@keyframes move {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }

  100% {
    padding-right: 4px;
  }
}

@keyframes slice {
  60% {
    width: 100%;
    left: 4px;
  }

  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}

@keyframes check-01 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(45deg);
  }

  100% {
    width: 5px;
    top: 8px;
    transform: rotate(45deg);
  }
}

@keyframes check-02 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(-45deg);
  }

  100% {
    width: 10px;
    top: 8px;
    transform: rotate(-45deg);
  }
}

@keyframes firework {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0,
      0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0,
      14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0,
      -14px -8px 0 0px #4f29f0;
  }
}

Toggle prefixes

1.2K views

Variation of acheckbox

Copy to Figma

1.2K views

Variation of acheckbox

Comments

MIT License

Copyright - 2024 JkHuger 
Copyright - 2024 JkHuger (JkHuger) 
Copyright - 2024 della11 (fabio.dellarosa) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.