[CSS] 애니메이션 토글 버튼 만들기

애니메이션 토글 버튼 만들기

See the Pen Untitled by Give J (@Give-J) on CodePen.

 

1. HTML

<div data-cy="setting_toggle" class="toggle-btn">
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</div>

 

728x90

2. CSS

.toggle-btn .switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 28px;
}
.toggle-btn .slider {
    position: absolute;
    cursor: pointer;
    inset: 0px;
    background-color: rgb(241, 244, 246);
    transition: all 0.4s ease 0s;
    border-radius: 34px;
}
.toggle-btn .slider::before {
    position: absolute;
    content: "";
    width: 22px;
    height: 22px;
    left: 2px;
    bottom: 3px;
    background-color: white;
    transition: all 0.4s ease 0s;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 4px 0px;
}
.toggle-btn input:checked + .slider {
    background-color: #000000;
}
.toggle-btn input:checked + .slider::before {
    transform: translateX(20px);
}