Toggle Switch là một button có thể chuyển đổi giá trị giống như một công tắc, Chúng ta có thể sử dụng Toggle Switch trong các form để đại diện cho một nội dung nào đó gồm hai giá trị yes và no. Các bạn hãy xem hình ảnh dưới đây: Show
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Trong bài này mình sẽ hướng dẫn các bạn tạo các Toggle Switch, Cùng tiến hành nhé! 1. Xây dựng giao diệnBước đầu tiên là xây dựng phần giao diện, các bạn tạo file <div class="container"> <h2>Freetuts.net hướng dẫn tạo Toggle Switch</h2> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> <label class="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> <br><br> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> <label class="switch"> <input type="checkbox" checked> <span class="slider round"></span> </label> </div> OK giờ chúng ta sẽ chuyển đến bước tiếp theo. Bài viết này được đăng tại [free tuts .net] 2. Thêm CSS để định dạng các thành phầnTrong bước này chúng ta sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style nhé: .container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } Thuật toán ở đây như sau:
Code input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } Vậy là ta đã có một công tắc được bật. Giờ các bạn chạy thử file 3. Lời kếtQua bài viết này, mình đã hướng dẫn các bạn tạo một Toggle Switch, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi xây dựng website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net Tham khảo: w3schools.com Tổng kết: 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é! đượ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é! 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ử 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é: Và kết quả bạn xem dưới đây nhé:
.container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }3: Dùng để thiết lập style khi input(ô) đang được focus.
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é: 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é: Bạn nhớ đặt đoạn mã trên ở trong thẻ Với class .container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }8 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 .container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }9 và input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }0 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é. 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. Những Ví Dụ Khác Về Toggle Switch ButtonKết quả bạn xem bên dưới nhé! 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. Nguồn Thiết Kế nút chuyển đổi HTML CSSKết Quả bạn xem bên dưới NHé! Xem bút một nút chuyển đổi khó hiểu của Himalaya Singh (@Himalayasingh) trên Codepen. Nguồn Cách tạo nút chuyển đổi CSS đơn giảnKết Quả bạn xem bên dưới NHé! Xem bút một nút chuyển đổi khó hiểu của Himalaya Singh (@Himalayasingh) trên Codepen. Nguồn Cách tạo nút chuyển đổi CSS đơn giảnKết Quả bạn xem bên dưới NHé! Xem bút một nút chuyển đổi khó hiểu của Himalaya Singh (@Himalayasingh) trên Codepen. Nguồn Cách tạo nút chuyển đổi CSS đơn giảnKết Quả bạn xem bên dưới NHé! Xem PEN PEN Simple CSS Switch / Toggle của Aaron Iker (@aaroniker) trên Codepen. Nguồn Cách tạo nút chuyển đổi CSS đơn giảnKết Quả bạn xem bên dưới NHé! Xem PEN PEN Simple CSS Switch / Toggle của Aaron Iker (@aaroniker) trên Codepen. Nguồn Cách tạo nút chuyển đổi CSS đơn giảnKết Quả bạn xem bên dưới NHé! Xem PEN PEN Simple CSS Switch / Toggle của Aaron Iker (@aaroniker) trên Codepen. Nguồn Cách tạo nút chuyển đổi CSS đơn giảnKết Quả bạn xem bên dưới NHé! Xem PEN PEN Simple CSS Switch / Toggle của Aaron Iker (@aaroniker) trên Codepen. Nguồn Cách tạo nút chuyển đổi CSS đơn giảnKết Quả bạn xem bên dưới NHé! Xem PEN PEN Simple CSS Switch / Toggle của Aaron Iker (@aaroniker) trên Codepen. Nguồn Cách tạo nút chuyển đổi CSS đơn giảnKết Quả bạn xem bên dưới NHé! Xem PEN PEN Simple CSS Switch / Toggle của Aaron Iker (@aaroniker) trên Codepen. Nguồn Cách tạo nút chuyển đổi phong cáchKết Quả bạn xem bên dưới NHé! Cách tạo công tắc hoạt hình Nguồn Xem Bút ✅ SWRITY SWITCHBOX | Hộp kiểm Chuyển đổi hoạt hình | @KeyFramers 2.0.0 bởi @KeyFramers (@KeyFramers) trên Codepen.Kết Quả bạn xem bên dưới NHé! Tổng hợp các css nút chuyển đổi Nguồn Xem các nút chuyển đổi CSS Pen Pure | Chuyển đổi bật của Himalaya Singh (@himalayasingh) trên Codepen.Kết Quả bạn xem bên dưới NHé! Nút chuyển đổi CSS3 CSS3 Nguồn Xem các hộp kiểm bút và các chỉ số khả năng trực quan của Adam Clark (@AdamStuartClark) trên Codepen.Kết Quả bạn xem bên dưới NHé! Cách tạo css3 nút chuyển đổi VớI văn bản Nguồn Xem bút I/O Codepen của Paraskevas Dinakis (@perry_nt) trên Codepen.Kết Quả bạn xem bên dưới NHé! Cách tạo Pure CSS chuyển đổi tối thiểu Nguồn Xem Pen Pure CSS chuyển đổi tối thiểu của RAU (@raubaca) trên Codepen.Kết Quả bạn xem bên dưới NHé! Cách tạo nút công tắc jQuery Nguồn Xem công tắc bật/tắt bút của Anastasia Goodwin (@AgoodWin) trên Codepen.Kết Quả bạn xem bên dưới NHé! Nút chuyển đổi html cách tạo Nguồn Xem cảm hứng chuyển đổi chuyển đổi tùy chỉnh bút (CSS thuần túy) của Aditya Bhandari (@Takeradi) trên CodePen.Kết Quả bạn xem bên dưới NHé! Cách tạo chuyển đổi nút CSS3 Nguồn Xem công tắc bút của Stef Geraets (@stefgeraets) trên Codepen.Kết Quả bạn xem bên dưới NHé! Nút Cách Tạo bật tắt bật CSS3 Nguồn Xem công tắc chuyển đổi ngày sang đêm của Aybüke Ceylan (@aybukeceylan) trên Codepen.Kết Quả bạn xem bên dưới NHé! Cách Tạo chuyển đổi nút công tắc CSS3 Nguồn Xem công tắc CSS của PEN của Randy Lebeau (@cl0udc0ntr0l) trên CodePen.Kết Quả bạn xem bên dưới NHé! Nút chuyển đổi hộp kiểm tùy chỉnh Cách Nguồn Xem hộp kiểm tùy chỉnh PEN / bật công tắc bật của ThelaazyGuy (@thelaazyguy) trên CodePen.Kết Quả bạn xem bên dưới NHé! Các nút chuyển đổi CSS thuần túy Nguồn Xem các nút chuyển đổi CSS thuần túy của Mauricio Allende (@mallendeo) trên Codepen.Kết Quả bạn xem bên dưới NHé! Star Wars chuyển đổi biểu tượng hoạt hình Nguồn Xem Biểu tượng Pen Star Wars chuyển đổi hoạt hình của Rıza Selçuk Saydam (@RSS) trên Codepen.Kết Quả bạn xem bên dưới NHé! Nút chuyển đổi jquery Nguồn Xem nút chuyển đổi pen của Nikhil Krishnan (@Nikhil8krishnan) trên Codepen.Kết Quả bạn xem bên dưới NHé! Chuyển đổi hoạt hình nút Nguồn Xem nút Chuyển đổi Bút của Aaron Iker (@aaroniker) trên Codepen.Kết Quả bạn xem bên dưới NHé! Công tắc CSS Nguồn Xem Bút CSS Switch của Seth.Schwiet (@Schwiet) trên Codepen.Kết Quả bạn xem bên dưới NHé! Chuyển đổi các nút bật tắt nút Nguồn Xem các nút chuyển đổi bút / công tắc bật tắt của Himalaya Singh (@Himalayasingh) trên Codepen.Kết Quả bạn xem bên dưới NHé! Nút chuyển đổi chuyển đổi phản ứng Nguồn Xem bút phản ứng DailyUI - 015 - Bật công tắc bật/tắt của Jack Oliver (@studiojvla) trên Codepen.Kết Quả bạn xem bên dưới NHé! Chuyển đổi công tắc CSS Nguồn Xem Bút bật Bút của Olivia Ng (@oliviale) trên Codepen.Kết Quả bạn xem bên dưới NHé! Chuyển đổi công tắc HTML Nguồn Xem Pen All-CSS chuyển đổi công tắc (Hack hộp kiểm) của Marcus Burnette (@Mburnette) trên CodePen.Kết Quả bạn xem bên dưới NHé! Hộp kiểm Kiểu chuyển đổi Nguồn Xem hộp kiểm theo kiểu chuyển đổi có thể truy cập của Chris Hart (@Personable) trên Codepen.Kết Quả bạn xem bên dưới NHé! HTML TOCK Hộp kiểm Nguồn Xem các nút chuyển đổi bút của Vineeth.tr (@vineethtrv) trên Codepen.Kết Quả bạn xem bên dưới NHé! Nút chuyển đổi đơn giản HTML Nguồn Xem Bút chuyển đổi đơn giản bằng Magnificode (@Magnificode) trên CodePen.Kết Quả bạn xem bên dưới NHé! See the Pen Tabs switch animations by Shayan (@shayanea) on CodePen. Nguồn Colorful Switch ButtonKết quả bạn xem bên dưới nhé! See the Pen Colorful Switch (CSS Only) by Nikolay Talanov (@suez) on CodePen. Nguồn Colorful Switch Button
3D Button Và 22 Ví dụ Thực Tế Cho Trang WebMẫu Button Dành Cho Người Mới Bắt Đầu Học HTML CSS |