Tại Switch Button đẹp thật đơn giản

Trên các website, nhiều khi chúng ta phải đưa ra cho người dùng sự lựa chọn như khi yêu cầu người dùng hoàn thành Form, xem người dùng có đồng ý các điều khoản khi tham gia diễn đàn, có hay không? rồi người dùng có thể chuyển đổi chế độ sáng tối để thay đổi Theme màu sắc trên website khi duyệt web,... và khi đó, các nhà phát triển web sẽ cần sử dụng đến Switch Button để cho người dùng dễ dàng thao tác trên hai sự lựa chọn mà nhà phát triển đưa ra. Và việc sử dụng Switch Button ra sao sẽ tác động mạnh đến trải nghiệm của người dùng website đó. Switch button với thiết kế đẹp, hiện đại nhưng đơn giản và dễ sử dụng sẽ thật hữu ích trong các trường hợp này, nó sẽ là sự lựa chọn tối ưu cho các nhà phát triển web. Sau đây tôi xin đề xuất một dạng Switch Button như thế: Chúng ta sẽ tạo ra 3 file HTML, CSS và Js (ở đây tôi sẽ sử dụng Jquery).

Ở file HTML

<h1>Switch Button</h1>
<label class="sw-btn"><input type="checkbox"></label>

Ở file CSS

Ở đây các bạn có thể thay thế bằng các màu sắc khác phù hợp với quan điểm đẹp của bạn và đẹp với website mà bạn đang muốn dùng nó chèn vào nhé.

h1{
  color:#000;
  padding-bottom:40px;
}
.sw-btn{
  awidth:60px;
  height:30px;
  border-radius:15px;
  background:#000;
  display:block;
  position:relative;
}
.sw-btn:after{
  position:absolute;
  height:28px;
  awidth:28px;
  display:block;
  border-radius:50%;
  background:#ff0000;
  top:1px;
  left:1px;
  content:'off';
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  text-align:center;
  line-height:29px;
  color:#fff;
  font-size:12px;
}
.sw-btn.active:after{
  left:100%;
  margin-left:-29px;
  background:#008000;
  content:'on';
}
.sw-btn input[type="checkbox"]{
  opacity:0;
}

Và sau khi có Switch button đẹp rồi thì chúng ta cần một ít Js cho người dùng có thể tương tác được nào