Checkbox by snehapuri

1.container input {
2  position: absolute;
3  opacity: 0;
4  cursor: pointer;
5  height: 0;
6  width: 0;
7}
8.container {
9  display: block;
10  position: relative;
11  cursor: pointer;
12  user-select: none;
13}
14.container svg {
15  position: relative;
16  top: 0;
17  left: 0;
18  height: 50px;
19  width: 50px;
20  transition: all 0.3s;
21  fill: #666;
22}
23.container svg:hover {
24  transform: scale(1.1);
25}
26
27.container input:checked ~ svg {
28  fill: #ffeb49;
29  animation: sparks 0.5s ease-in-out forwards;
30}
31@keyframes sparks {
32  0% {
33    opacity: 1;
34    transform: translateY(0) rotate(45deg);
35  }
36  100% {
37    opacity: 0;
38    transform: translateY(-20px) rotate(45deg);
39  }
40}
41