아이폰 버튼 효과

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;
}

 

결과