Checkbox using HTML CSS

<div class="myuihub-checkbox">
    <input type="checkbox" id="myuihub-input">
    <label for="myuihub-input"></label>
</div>

.myuihub-checkbox input {
    display: none;
}

.myuihub-checkbox label {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-radius: 100px;
    border: 1px solid black;
    margin: 0;
    background-image: url("data:image/svg+xml,<svg width='512' height='369' viewBox='0 0 512 369' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M500.103 11.8931C484.262 -3.96937 458.538 -3.95937 442.675 11.8931L184.211 270.368L69.3345 155.492C53.4721 139.63 27.7593 139.63 11.8968 155.492C-3.96562 171.355 -3.96562 197.068 11.8968 212.93L155.486 356.519C163.412 364.445 173.806 368.419 184.2 368.419C194.594 368.419 204.998 364.455 212.924 356.519L500.103 69.3298C515.966 53.4783 515.966 27.7546 500.103 11.8931Z' fill='white'/></svg>");
    background-size: 0%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 300ms ease-in-out;
}

.myuihub-checkbox input:checked~label {
    background-size: 50%;
    background-color: black;
    --size: 15px;
    box-shadow: -10px -10px var(--size) 0px #FCAF45, 0 -10px var(--size) 0px #F77737, 10px -10px var(--size) 0px #833AB4, 10px 0 var(--size) 0px #E1306C, 10px 10px var(--size) 0px #FFDC80, 0 10px var(--size) 0px #FD1D1D, -10px 10px var(--size) 0px #5B51D8;
}

No results found