.exp {
    width: 100%;
    height: 100%;
}

    .exp .checkbox {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

label {
    display: inline-block;
    color: #8c00ff;
    cursor: pointer;
    position: relative;
    line-height:30pt
}

    label span {
        display: inline-block;
        position: relative;
        background-color: transparent;
        width: 25px;
        height: 25px;
        transform-origin: center;
        border: 2px solid #8c00ff;
        border-radius: 50%;
        vertical-align: -6px;
        margin-right: 10px;
        transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
    }

        label span:before {
            content: "";
            width: 0px;
            height: 2px;
            border-radius: 2px;
            background: #8c00ff;
            position: absolute;
            transform: rotate(45deg);
            top: 13px;
            left: 9px;
            transition: width 50ms ease 50ms;
            transform-origin: 0% 0%;
        }

        label span:after {
            content: "";
            width: 0;
            height: 2px;
            border-radius: 2px;
            background: #8c00ff;
            position: absolute;
            transform: rotate(305deg);
            top: 16px;
            left: 10px;
            transition: width 50ms ease;
            transform-origin: 0% 0%;
        }

    label:hover span:before {
        width: 5px;
        transition: width 100ms ease;
    }

    label:hover span:after {
        width: 10px;
        transition: width 150ms ease 100ms;
    }

input[type=checkbox] {
    display: none;
}

    input[type=checkbox]:checked + label span {
        background-color: #fff;
        transform: scale(1.25);
    }

        input[type=checkbox]:checked + label span:after {
            width: 10px;
            background: #8c00ff;
            transition: width 150ms ease 100ms;
        }

        input[type=checkbox]:checked + label span:before {
            width: 5px;
            background: #8c00ff;
            transition: width 150ms ease 100ms;
        }

    input[type=checkbox]:checked + label:hover span {
        background-color: #fff;
        transform: scale(1.25);
    }

        input[type=checkbox]:checked + label:hover span:after {
            width: 10px;
            background: #8c00ff;
            transition: width 150ms ease 100ms;
        }

        input[type=checkbox]:checked + label:hover span:before {
            width: 5px;
            background: #8c00ff;
            transition: width 150ms ease 100ms;