LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html, body {
    height: 100%;
}
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.Checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-size: 1.05rem;
    color: #25282f;
}
    .Checkbox-input {
        display: none;
    }
    .Checkbox-svg {
        margin-right: 8px;
        margin-right: .5rem;
    }
        .Checkbox-path {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 110;
            stroke-dashoffset: -32;
        }
        .Checkbox-input:checked + .Checkbox-svg .Checkbox-path {
            stroke: #3ca5dd;
            stroke-dasharray: 25 90;
            stroke-dashoffset: 0;
            -webkit-transition: stroke .4s,
                stroke-dasharray .4s,
                stroke-dashoffset .4s cubic-bezier(.3, .8, .6, 1.5);
                    transition: stroke .4s,
                stroke-dasharray .4s,
                stroke-dashoffset .4s cubic-bezier(.3, .8, .6, 1.5);
        }
JS
/*
 * Follow me on Twitter @a_dugois
 */

Description

A little checkbox made with SVG and animated with CSS3 transitions.
Term
Mon, 11/27/2017 - 22:24

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv