Sleek Checkbox User Interface Design - Custom Checkbox UI Design Using HTMl, CSS and Javascript

Trong bài viết này mình muốn chia sẽ cho các bạn một giao diện Sleek 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">
    <div class="inner">
        <div class="toggle">       
        </div>
    </div>
</div>

#checkbox-demo {
    width: 100px;
    height: 50px;
    border-radius: 25px;
    background: -webkit-gradient(linear,left bottom, left top,from(#d8d8d8),to(#cccccc));
    background: -webkit-linear-gradient(bottom,#d8d8d8,#cccccc);
    background: -o-linear-gradient(bottom,#d8d8d8,#cccccc);
    background: linear-gradient(0deg,#d8d8d8,#cccccc);
    border-top: 0.02em solid #ececec;
    border-bottom: 0.02em solid #ececec;
    position: relative;
    .inner {
        position: absolute;
        top:10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: -webkit-gradient(linear,left bottom, left top,from(#a5a5a5),to(#717171));
        background: -webkit-linear-gradient(bottom,#a5a5a5,#717171);
        background: -o-linear-gradient(bottom,#a5a5a5,#717171);
        background: linear-gradient(0deg,#a5a5a5,#717171);
        border-radius: 20px;
        -webkit-box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
                box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
        .toggle {
            position: absolute;
            cursor: pointer;
            top:-3px;
            left: -3px;
            width: 36px;
            height: 36px;
            border-radius: 100%;
            background: -webkit-gradient(linear,left bottom, left top,from(#ccc),to(#e4e4e4));
            background: -webkit-linear-gradient(bottom,#ccc,#e4e4e4);
            background: -o-linear-gradient(bottom,#ccc,#e4e4e4);
            background: linear-gradient(0deg,#ccc,#e4e4e4);
            -webkit-box-shadow: 0 4px 6px rgba(0,0,0,.2);
                    box-shadow: 0 4px 6px rgba(0,0,0,.2);
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            border-top: 0.04em solid #ececec;
            border-bottom: 0.04em solid #ececec;
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            &:before {
                content: "OFF";
                position: absolute;
                top:4px;
                left: 4px;
                right: 4px;
                bottom: 4px;
                border-radius: 100%;
                text-align: center;
                font-size: 10px;
                line-height: 28px;
                color: #a9a9a9;
                background: -webkit-gradient(linear,left bottom, left top,from(#e4e4e4),to(#ccc));
                background: -webkit-linear-gradient(bottom,#e4e4e4,#ccc);
                background: -o-linear-gradient(bottom,#e4e4e4,#ccc);
                background: linear-gradient(0deg,#e4e4e4,#ccc);
            }
        }
        &.active {
            background: -webkit-gradient(linear,left bottom, left top,from(#00d22d),to(#158a00));
            background: -webkit-linear-gradient(bottom,#00d22d,#158a00);
            background: -o-linear-gradient(bottom,#00d22d,#158a00);
            background: linear-gradient(0deg,#00d22d,#158a00);
            .toggle {
                left: 47px;
                &:before {
                    content: "ON";
                    color: #00d22d;
                }
            }
        }
    }
}

$(document).ready(function() {
    $("#checkbox-demo .toggle").click(function(event) {
        $("#checkbox-demo .inner").toggleClass('active');
    });
});

2 thảo luận về Sleek Checkbox User Interface Design - Custom Checkbox UI Design Using HTMl, CSS and Javascript

agrilmida - 02/04/2021

[url=http://fcialisj.com/]best place to buy cialis online forum[/url]

agrilmida - 19/12/2020

Where To Order Cialis Pills Busiaimall [url=https://bansocialism.com/]buy cialis online uk[/url] suemGesy cialis sample pacs

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