Create an Animated Toggle Switch Button in CSS for Your Website 🔥

Подписаться 678 тыс.

Просмотров 12 тыс.

50% 1

Welcome, In this tutorial, we'll walk through step-by-step on how to design and code a stylish on/off toggle switch button using CSS. Whether you're a beginner or have some experience with web development, this tutorial will provide you with the skills you need to create a toggle switch that not only looks great, but also works seamlessly on your website.
👉 Get Source Code: www.thapatechnical.com/2023/0...
👉 Free JetBrains Student licenses - jb.gg/JetBrainsStudentLicense
👉 For Professionals, 3 Months WebStorm License (choose WebStorm) - jb.gg/GetWebStorm
Coupon Code - YMBVT-URD82-N4QU8-DV69Z-AFD5Q ( Valid till July 31st )
😊 Become Member, get access to perks, free Source code, & more..
/ @thapatechnical
😍 Check my Instagram to Connect with me: / thapatechnical
👩‍💻 Discord Server Link for Programmer to Hangout: / discord
✌ Website Link: www.thapatechnical.com
-------TIMELINE-------
0:00 - Introduction
0:16 - HTML structure for toggle switch
1:35 - Styling the bottom part of the toggle switch with CSS
4:10 - Centering the toggle switch perfectly using CSS
4:45 - Creating the toggle ball element
6:05 - Adding toggle functionality to the switch using CSS only
8:46 - Hiding the input checkbox element
************ 😍 Must Watch Videos For Web Development 😍 ************
➡️ Complete Reactjs in One video here • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...

Опубликовано:

25 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 23

@komaldas1555 Год назад

It's easy 😮🥳thanks

@satyapriyobiswas7900 Год назад

Nice and useful

@brucewayne252 Год назад

At 4:40 we need more explanation. Like how did that happen, how does the properties work together to align items in that way?

@rajumali5340 Год назад

Thanks sir

@kassarsamaj Год назад

thanks sir 👌👌👌👌

@pradipbhoskar2180 Год назад

please.. make tutorial series on react flow

@Ajitcodermern Год назад

Sir microservices one video create kariye using MERN and project

@taiyebkhan2925 Год назад

Sir app aap ne single colon :after use kia h firbi work kr rha h explain pls

@rishiraj2548 Год назад

👍💯💯

@dishayadav1903 Год назад

please Create Python Full Course 🙏 🥺

@bikrambhatta943 Год назад

thank you dai ani aba feri dark mood website make

@coder40208 Год назад

Sir react ka new tutorial lawo 2023 new features ke satha thank you

@coder40208 Год назад

Or ek Instragram website ka video laiye html css

@tuntunichidiyashorts. Месяц назад

bhai vs code fully free hai student hone ki bhi jarurat nahi

@Abhijit.Ghosh20 Год назад

Why not height :: 10px ?? What is the functionality of "Vh"

@visheshpandey2001 Год назад

10px is absolute value it means it doesn't really depends upon height of the window.. but vh is view height it means relative to screen height. so if we are writing 10vh it means 10 percent of screen height.

@VINAYMAIDA Год назад

But mobile

@amitkumarjha3809 Год назад

Mene ise kuchh is tarike se kiya jo ki isse bhu jyada aasaan hai. * { margin: 0; padding: 0; box-sizing: border-box; } #switch { appearance: none; height: 25px; width: 25px; background-color: white; border-radius: 50%; } div:has(#switch:checked) { background-color: blue; padding: 3px 0 3px 22px; } div:has(#switch) { background: #afacac; height: 30px; width: 50px; border-radius: 30px; padding: 3px 0 3px 4px; transition: padding 0.1s linear; }

@amitkumarjha3809 Год назад

* { margin: 0; padding: 0; box-sizing: border-box; border-color: inherit; color: inherit; background-color: inherit; } body:has(#switch:checked) { background-color: black; color: white; border-color: white; } #switch { appearance: none; height: 25px; width: 25px; background-color: white; border-radius: 50%; } div:has(#switch:checked) { background-color: blue; padding: 3px 0 3px 22px; } div:has(#switch) { background: #afacac; height: 30px; width: 50px; border-radius: 30px; padding: 3px 0 3px 4px; transition: padding 0.1s linear; } Ye wala dark-mode ke liye hai.