Tạo ToggleButton đẹp mắt với CSS3 mà không cần Javascript

Chào các bạn, ở 1 bài viết trước đây mình đã trình bày cho mọi người cách để làm đẹp cho radio button với CSS3, các bạn quan tâm có thể xem bài viết ở đây. Hôm nay, mình xin tiếp tục viết về chủ đề dùng CSS3 để style cho các element mặc định trong HTML trở nên đẹp mắt hơn. Ở nội dung bài viết ngắn này, mình xin hướng dẫn cho các bạn cách tạo 1 ToggleButton đơn giản bằng HTML và CSS3. Mục tiêu của chúng ta sau khi thực hiện xong ví dụ trong bài viết này sẽ là 1 ToggleButton với 2 trạng thái khi click giống như ToggleButton trên iOS: Disable: và Enable:

Thực hiện

Ý tưởng thực hiện ToggleButton chỉ với HTML và CSS là chúng ta sẽ dùng checkbox của HTML. Sau đó ta dựa vào sự kiện checked, unchecked của checkbox để hiển thị 2 trạng thái Disable và Enable cho ToggleButton.

Đầu tiên, ta có cấu trúc HTML cho phần ToggleButton như sau:

<div class="toggle-button-demo">
  <h4>ToggleButton Demo</h4>
  <input class="toggle toggle-ios" id="toggle1" type="checkbox"/>
  <label class="toggle-btn" for="toggle1"></label>
</div>

Trong cấu trúc HTML trên, ta có input với type="checkbox" và 1 thẻ label cùng cấp với thẻ input. Thẻ label này sẽ đóng vai trò cực kỳ quan trọng là hiển thị thay thế cho checkbox mặc định ở trên. Tiếp theo, ta dùng CSS style cho các thẻ HTML, bước này ta sẽ dùng CSS ẩn checkbox mặc định đi và tạo hình ToggleButton cho thẻ label.

.toggle-button-demo {
  text-align: center;
}
h4 {
  font-size: 20px;
  color: #333;
}
.toggle-ios {
  display: none;
}
.toggle-ios + .toggle-btn {
  outline: 0;
  display: block;
  width: 4em;
  margin: 0 auto;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.toggle-ios + .toggle-btn:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

Ta dùng phương thức CSS selector + để kết hợp xử lý vừa ẩn checkbox vừa hiển thị label dưới dạng ToggleButton. Nếu bạn chưa hiểu rõ về CSS selector trong CSS3 có thể tham khảo thêm ở đây

Tiếp theo ta sẽ xử lý sự kiện checked và unchecked của checkbox như sau:

.toggle-ios:checked + .toggle-btn {
  background: #86d993;
}
.toggle-ios:checked + .toggle-btn:after {
  left: 50%;
}

Ở trên, đơn giản chúng ta chỉ cần dựa vào sự kiện checked và unchecked của checkbox, và kết hợp với CSS seclector của CSS3 bằng phương thức +. Khi checkbox có trạng thái checked ta kết hợp với label để thay đổi background của label, đồng thời ta kết hợp với :before của label để tạo ra hiệu ứng chuyển trạng thái từ trái (disable) qua phải (enable) cho ToggleButton.

Kết quả

Các bạn có thể xem trực quan ví dụ về ToggleButton ở đây:

Trên đây là bài viết ngắn mình tiếp tục giới thiệu cho mọi người 1 số tính năng khá hữu dụng khi kết hợp giữa HTML và CSS(CSS3). Cảm ơn các bạn đã theo dõi bài viết. Tham khảo: https://codepen.io/mallendeo/pen/eLIiG