HMTL + CSS3로 아이폰 버튼 효과를 만들었습니다.
<div class="btn_wrap">
<input type="checkbox" name="agree" id="aa">
<label for="aa">동의<span class="btn"></span></label>
<input type="checkbox" name="agree" id="bb">
<label for="bb">거부<span class="btn"></span></label>
</div>
.btn_wrap {
padding: 50px;
}
.btn_wrap label {
font-size: 30px;
}
.btn {
display: inline-block;
position: relative;
background: #b2b2b2;
border-radius: 30px;
width: 100px;
height: 50px;
cursor: pointer;
vertical-align: middle;
transition: all 0.3s;
}
.btn:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
border: 1px solid #eee;
transition: all 0.3s;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked+label .btn {
background: #18e46e;
}
input[type="checkbox"]:checked+label .btn:after {
left: 50px;
}
결과
반응형
'CSS3' 카테고리의 다른 글
익스에서 scale 떨림 (0) | 2019.09.29 |
---|---|
flex를 이용한 반응형 레이아웃 (0) | 2019.09.29 |
대각선 박스 호버 효과 (0) | 2019.09.26 |
will-change (0) | 2019.09.26 |
텍스트에 색을 반씩 넣는 효과 (0) | 2019.09.25 |