Onay Kutusu 16

/* Hide the default checkbox */
.container18 input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

.container18 {
display: block;
position: relative;
cursor: pointer;
font-size: 20px;
user-select: none;
}

/* Create a custom checkbox */
.checkmark18 {
position: relative;
top: 0;
left: 0;
height: 1.3em;
width: 1.3em;
background-color: #ccc;
transition: all 0.3s;
border-radius: 5px;
}

/* When the checkbox is checked, add a blue background */
.container18 input:checked ~ .checkmark18 {
background-color: #47da99;
animation: pop 0.5s;
animation-direction: alternate;
}

/* Create the checkmark18/indicator (hidden when not checked) */
.checkmark18:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark18 when checked */
.container18 input:checked ~ .checkmark18:after {
display: block;
}

/* Style the checkmark18/indicator */
.container18 .checkmark18:after {
left: 0.45em;
top: 0.25em;
width: 0.25em;
height: 0.5em;
border: solid white;
border-width: 0 0.15em 0.15em 0;
transform: rotate(45deg);
}

@keyframes pop {
0% {
transform: scale(1);
}

50% {
transform: scale(0.9);
}

100% {
transform: scale(1);
}
}