체크박스 디자인-2 (checkbox Design-2 with CSS)

체크박스 디자인 2

 

기본 체크박스로 활용할 수 있다.

 

 

 

✔️ HTML

<div class="cbxBox">
    <label class="box">
        <input type="checkbox" checked="">
        <span></span>
    </label>
</div>

 

✔️ CSS

.cbxBox {
    position: relative;
    left: 50%;
}
.box {
    display: flex;
    align-items: center;
}
.box input[type="checkbox"] {
    position: relative;
    height: 35px;
    width: 35px;
    appearance: none;
    background-color: #FFF;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
}
.box input[type="checkbox"]::after {
    content: '';
    display: block;
    height: 15px;
    width: 8px;
    border-bottom: 4px solid #e1f5fe;
    border-right: 4px solid #e1f5fe;
    opacity: 0;
    transform: rotate(45deg) translate(-50%, -50%);
    position: absolute;
    top: 45%;
    left: 25%;
    transition: all .25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.box input[type="checkbox"]::before {
    position: absolute;
    display: block;
    content: '';
    height: 0;
    width: 0;
    background-color: #01579b;
    border-radius: 50%;
    opacity: .5;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.box input[type="checkbox"]:checked::before {
    height: 120%;
    width: 120%;
    opacity: 100%;
}
.box input[type="checkbox"]:checked::after {
    opacity: 100%;
}

 

✔️ GitHub

https://github.com/rudtn082/UI/tree/main/checkbox2