35 Toggle Switch Buttons Cho Thiết Kế Website

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

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:focus và input: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 id và for 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

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.

35 Toggle Switch Buttons Cho Thiết Kế Website

Toogle Button

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

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

Thiết Kế Pure CSS Toggle Switch

Thiết Kế Toggle Button HTML CSS

Cách Tạo Simple CSS Switch Button

Cách Tạo Stylish Toggle Button

Cách Tạo Switch Button Animation

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

Cách Tạo CSS3 Toggle Button

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

Cách Tạo Pure CSS Minimal Toggle

Cách Tạo Switch Button Jquery

Cách Tạo HTML Switch Button

Cách Tạo Button Switch CSS3

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

Cách Tạo Toggle Switch Button CSS3

Cách Custom Checkbox-Toggle Switch Button

Pure CSS toggle buttons

Star Wars Toggle Icon Animation

Jquery Toggle Button

Toggle Button Animation

CSS Switch

Toggle buttons On-Off switches

React Toggle Switch Button

Toggle switch CSS

Toggle Switch HTML

Toggle Style Checkbox

HTML Toggle Checkbox

Simple toggle button html

3D Toggle Button

Bubble Toggle

iOS-inspired checkbox

Pure CSS Bulb Switch

Toggle Button CSS Only

3D Switch animation

Tabs switch animations

Colorful Switch Button

Tổng kết:

Từ Khóa

CSS HTML Javascript Nguồn Lập Trình Wordpress

Góc trả lời