<!-- HTML -->
<div class="check">
<div class="button">
<input type="checkbox" class="checkbox">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
/* CSS */
/* on/off 박스 */
.check {
position: relative;
display: flex;
flex-direction: column;
color: #97acd1;
align-items: center;
}
.check p {
font-size: 14px;
color: #97acd1;
margin-bottom: 5px;
}
.check .button {
position: relative;
top: 50%;
width: 50px;
height: 25px;
border-radius: 100px;
}
.check .button .checkbox {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.check .button .knobs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
transition: 0.3s ease all;
}
.check .button .layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
border-radius: 100px;
background-color: #b9b9b9;
transition: 0.3s ease all;
z-index: 1;
}
.check .button .knobs:before {
content: "";
position: absolute;
top: 5px;
left: 6px;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
background-color: #fff;
border-radius: 50%;
transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
.check .button .checkbox:checked + .knobs:before {
content: "";
left: 30px;
}
.check .button .checkbox:checked ~ .layer {
background-color: #2ebee3;
}
'[HTML , CSS , JS]' 카테고리의 다른 글
[HTML,CSS] overflow 와 text-overflow 속성정리 (0) | 2020.04.23 |
---|---|
[HTML,CSS]text-align 속성 (1) | 2020.04.23 |
[HTML,CSS] display / visibility / opacity 의 속성정리 (0) | 2020.04.20 |
[HTML , CSS] Font Awesome 사용법 (0) | 2020.04.12 |
[HTML , CSS] margin과 padding 속성 (0) | 2020.04.08 |