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{
  width:60px;
  height:30px;
  border-radius:15px;
  background:#000;
  display:block;
  position:relative;
}
.sw-btn:after{
  position:absolute;
  height:28px;
  width: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

File JS

Trước khi viết Js vì chúng ta sử dụng là code Jquery vì thế cần khai báo trước thư viện Jquery, nếu không quan tâm gì đến IE 6,7,8 thì ta có thể sử dụng phiên bản Jquery 2x cho nhẹ và load nhanh, còn nếu vẫn muốn website của bạn chạy trên cả IE 6,7,8 thì bạn có thể sử dụng thử viện Jquery 1x. Chúng ta có thể download thư viện Jquery từ trang chủ của chính nó và gọi đến nó, hoặc nhúng đường dẫn của file đó vào theo 1 trong hai cách sau:

<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Sau đó là file custom.js để thêm chút chuyển động cho nó nhé

$('.sw-btn').on('click', function(){
  if($(this).children().is(':checked')){
    $(this).addClass('active');
  }
  else{
    $(this).removeClass('active')
  }
});

Và thế là chúng ta đã tạo ra được một Switch Button vừa đẹp, hiện đại và cũng thật simple phải không cả nhà, hãy thử code theo tôi ở trên để trải nghiệm sản phẩm mình làm ra nhé. Càm ơn các anh em.