Pure CSS Animated Checkbox Design - How to make Custom Checkbox in HTML and CSS - Tutorial

Trong bài viết này mình muốn chia sẽ cho các bạn một giao diện Animated Checkbox đơn giản khá hay ho thuần CSS3 được dùng trong lập trình giao diện website. Chúc các bạn một ngày làm việc hiệu quả.
<div id="checkbox-demo">
    <label for="checkbox-1"><input type="checkbox" name="" id="checkbox-1"> Bạn có đồng ý mình đẹp trai</label>
</div>

#checkbox-demo {
    label {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        font-size: 20px;
        font-weight: normal;
        margin-bottom: 0;
    }
    input[type="checkbox"] {
        position: relative;
        top:0;
        margin:0 10px 0 0;
        width: 30px;
        height: 30px;
        -webkit-appearance:none;
        outline: none;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        -webkit-box-shadow: none;
                box-shadow: none;
        background: transparent;
        border: none;
        &:before {
            content: "";
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            border: 2px solid #262626;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
        }
        &:checked {
            &:before {
               border-left: none;
               border-top:none;
               width: 15px;
               border-color: #0f0;
               -webkit-transform: rotate(45deg) translate(5px, -10px);
                   -ms-transform: rotate(45deg) translate(5px, -10px);
                       transform: rotate(45deg) translate(5px, -10px);
            }
        }
    }
}

0 thảo luận về Pure CSS Animated Checkbox Design - How to make Custom Checkbox in HTML and CSS - Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục