checkAnimation.css

.inputGroup{
    background:#fff;
    display:block;
    margin:10px 0px;
    position:relative
}
label{
    padding:12px 30px;
    width:100%;
    display:block;
    text-align:center;
    color:#3c454c;
    cursor:pointer;
    position:relative;
    z-index:2;
    transition: color .2s ease-in;
    overflow:hidden;
}
label::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    position:absolute;
    background:#5562eb;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale3d(1,1,1);
    transition:all .3s cubic-bezier(.4,0,.2,1);
    opacity:0;
    z-index:-1;
}
label::after{
    content:"";
    width:32px;
    height:32px;
    border:2px solid #d1d7dc;
    background-color:#fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat:no-repeat;
    background-position:2px 3px;
    border-radius:50%;
    z-index:2;
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    transition:all .2s ease-in;
}

input:checked ~ label{
    color:#fff;
}

input:checked ~ label::before{
    transform:translate(-50%,-50%) scale3d(56,56,1);
    opacity:1;
}

input:checked ~ label::after{
    background-color:#54e0c7;
    border-color:#53e0c7;
}

input{
    width:32px;
    height:32px;
    order:1;
    z-index:2;
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    visibility:hidden
}

.form{
    padding:0 16px;
    max-width:550px;
    margin:50px auto;
    font-size:18px;
    font-weight:600;
    line-height:36px;
}
body {
    background-color: #D1D7DC;
    font-family: 'Fira Sans', sans-serif;
}
*,
*::before,
*::after{
    box-sizing:inherit;
}

html{
    box-sizing:border-box;
}