Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Toggle Switch Button Và 15 Ví Dụ Thực Tế Cho Website

Cách Tạo Toggle Switch Button Và 15 Ví Dụ Thực Tế Cho Website


Ngày 23 Tháng 1 Năm 2021

Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo một nút toggle switch button cơ bản cũng như sử dụng các thư viện để tạo những nút này trong đẹp mắt hơn cho trang web của bạn. Và để hiểu rõ hơn, chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Toogle Button Là Gì?

Toggle Button được xem như là một công tắc giúp bạn có thể chuyển đổi trạng thái của một đối tượng trong trang web. Trong bài này chúng ta sẽ đi vào tìm hiểu vấn đề chính là cách thiết kế nút toggle switch để thu hút sự chú ý của người dùng cũng như mang lại cảm giác hiện đại cho trang web nhé!

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho nút Toogle Switch (Thông thường nút này sẽ được tạo bởi phần tử checkbox trong HTML nhé)

<!--https://www.niemvuilaptrinh.com/-->
<!-- Nút Toggle Switch Hình Chữ Nhật -->
 <label class="switch">
   <input type="checkbox">
   <span class="slider"></span>
 </label>
<!-- Nút Toggle Switch Dạng Bo Góc  -->
 <label class="switch">
   <input type="checkbox">
   <span class="slider round"></span>
 </label>

Tiếp theo chúng ta sẽ đi vào thiết lập các thuộc tính CSS cho các đối tượng HTML ở phía trên nhé:

/* thiết lập CSS cho switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
/* Ẩn ô checkbox  */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* Thiết lập CSS cho slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

Và kết quả bạn xem dưới đây nhé:

See the Pen thiet lap html css cho check box by haycuoilennao19 (@haycuoilennao19) on CodePen.

Trước khi thêm chức năng để nó có thể hoạt động thì mình sẽ giải thích thêm về hai thuộc tính quan trọng được sử dụng để tạo nút toggle switch là input:focusinput:checked.

  • input:focus: Dùng để thiết lập style khi input(ô) đang được focus.
  • input:checked: Dùng để thiết lập style khi input(ô) ở trạng thái được chọn.

Và để dễ hình dùng hơn hai cách sử dụng này thì bạn hãy xem ví dụ dưới đây nhé:

See the Pen ô input voi thuoc tinh focus va checked by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sau khi bạn đã hiểu hai thuộc tính này thì chúng ta sẽ đi vào thiết kế để nó có thể chuyển đổi qua lại như một công tắc thông qua đoạn code dưới đây nhé:

 input:checked + .slider {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen nút hoàn chỉnh toggle switch by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn W3School

Sử Dụng Thư Viện MoreToggles.css Để Tạo Nút Toggle Switch Button

Việc chúng ta sử dụng thư viện để tạo nút toggle switch sẽ giúp bạn có thể giảm thời gian công sức cho việc viết mã cũng như mang lại tính thẩm cao, sự lựa chọn đa dạng cho trang web của bạn.

Đầu tiên chúng ta sẽ lấy đường dẫn CDN của thư viện để có thể sử dụng trực tiếp trong trang web thông qua đoạn mã sau nhé:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/[email protected]/output/moretoggles.min.css">

Bạn nhớ đặt đoạn mã trên ở trong thẻ head nha. Việc tiếp theo bạn chỉ cần gọi các class mà thư viện cung cấp là có thể tạo ra được nút toggle như ý muốn của mình rồi. Để hiểu rõ hơn chúng ta sẽ đi vào ví dụ nhé:

  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/[email protected]/output/moretoggles.min.css">
  </head>
  <body>
    <div class="mt-ios">
      <input id="1" type="checkbox" />
     <label for="1"></label>
   </div>
  </body>

Với class mt-ios là một style được thiết kế sẵn cho nút toggle switch do thư viện cung cấp. Và bây giờ chúng ta hảy cùng nhau xem kết quả nhé:

See the Pen sử dụng moretoggles csss by haycuoilennao19 (@haycuoilennao19) on CodePen.

Và dưới đây là một số ví khác về nút này khi sử dụng thư viện MoreToggles.css nhé:

See the Pen Ví dụ khác về MoreToggles CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Một lưu ý nhỏ là khi bạn tạo từ 2 nút toggle switch trở lên thì ta phải thiết lập thuộc tính idfor của mỗi nút bắt buộc phải khác nhau. Và nếu bạn muốn tìm hiểu thêm thư viện này thi có thể xem ở đây nhé.

Những Ví Dụ Khác Về Toggle Switch Button

Tiếp theo đây chúng ta sẽ đi vào những ví dụ khác về skillbar do các bạn lập trình viên trên Codepen thiết kế và phát triển nhé!
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Thiết Kế Pure CSS Toggle Switch

Pure CSS Toggle Switch

Kết quả bạn xem bên dưới nhé!

See the Pen Pure Css "day and night" toggle by Benjamin Réthoré (@bnthor) on CodePen.

Nguồn

Thiết Kế Toggle Button HTML CSS

Toggle Button HTML CSS

Kết quả bạn xem bên dưới nhé!

See the Pen A Confusing Toggle Button by Himalaya Singh (@himalayasingh) on CodePen.

Nguồn

Cách Tạo Simple CSS Switch Button

Simple CSS Switch Button

Kết quả bạn xem bên dưới nhé!

See the Pen Simple CSS Switch / Toggle by Aaron Iker (@aaroniker) on CodePen.

Nguồn

Cách Tạo Stylish Toggle Button

Stylish Toggle Button

Kết quả bạn xem bên dưới nhé!

See the Pen Simple CSS Switch / Toggle by Aaron Iker (@aaroniker) on CodePen.

Nguồn

Cách Tạo Switch Button Animation

Switch Button Animation

Kết quả bạn xem bên dưới nhé!

See the Pen ✅ Springy Switchbox | Checkbox toggle animation | @keyframers 2.0.0 by @keyframers (@keyframers) on CodePen.

Nguồn

Tổng Hợp Các CSS Toggle Button

Tổng Hợp Các CSS Toggle Button

Kết quả bạn xem bên dưới nhé!

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.

Nguồn

Cách Tạo CSS3 Toggle Button

CSS3 Toggle Button

Kết quả bạn xem bên dưới nhé!

See the Pen Checkboxes and Visual Affordance Indicators by Adam Clark (@adamstuartclark) on CodePen.

Nguồn

Cách Tạo CSS3 Toggle Button Với Text

CSS3 Toggle Button Với Text

Kết quả bạn xem bên dưới nhé!

See the Pen I/O Codepen by Paraskevas Dinakis (@perry_nt) on CodePen.

Nguồn

Cách Tạo Pure CSS Minimal Toggle

Pure CSS Minimal Toggle

Kết quả bạn xem bên dưới nhé!

See the Pen Pure CSS Minimal Toggle by Rau (@raubaca) on CodePen.

Nguồn

Cách Tạo Switch Button Jquery

Switch Button Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen On/off toggle switch by Anastasia Goodwin (@agoodwin) on CodePen.

Nguồn

Cách Tạo HTML Switch Button

HTML Switch Button

Kết quả bạn xem bên dưới nhé!

See the Pen Custom Toggle Switch Inspiration (Pure CSS) by Aditya Bhandari (@takeradi) on CodePen.

Nguồn

Cách Tạo Button Switch CSS3

Button Switch CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen switch by Stef Geraets (@stefgeraets) on CodePen.

Nguồn

Cách Tạo Button On-Off Toggle CSS3

Button On-Off Toggle CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Day to Night Toggle Switch by Aybüke Ceylan (@aybukeceylan) on CodePen.

Nguồn

Cách Tạo Toggle Switch Button CSS3

Toggle Switch Button CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen CSS Switch by Randy Lebeau (@cl0udc0ntr0l) on CodePen.

Nguồn

Cách Custom Checkbox-Toggle Switch Button

Custom Checkbox-Toggle Switch Button

Kết quả bạn xem bên dưới nhé!

See the Pen Custom Checkbox / Toggle Switch by thelaazyguy (@thelaazyguy) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức về toggle switch hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!