How To Make Toggle Button Using HTML & CSS

In this video i show you how to make a toggle button with checkbox using html & css. Or you can say in this video we are going to design checkbox or making custom checkbox.
For source code visit 👇 :
www.maketechstuff.com/
You may have to search on website ('toggle button').
______________________________
Related Videos :
Toggle button for dark and light mode.
• Dark and Light Mode To...
Animated toggle button.
• Toggle Switch Using HT...
Website with dark and light mode.
• How To Create Website ...
Custom rounded checkbox
• How To Create Custom C...
Sidebar menu close and hide using only html and css
• Sidebar Menu using onl...

Пікірлер: 60

  • @tanjirnu
    @tanjirnu3 ай бұрын

    Sir, we are with you . keep doing what are you doing.......

  • @dynashiftgaming2861
    @dynashiftgaming28617 ай бұрын

    full support man. 🖤

  • @matsang2008
    @matsang20086 ай бұрын

    Nice. You made it so easy. No more blah blah and straight forward. Thanks

  • @Maketechstuffs

    @Maketechstuffs

    2 ай бұрын

    Your welcome

  • @Nexaman18

    @Nexaman18

    Ай бұрын

    @@Maketechstuffs L easy bruuuh no explation just copy paste

  • @BlueAngleYt
    @BlueAngleYt4 ай бұрын

    Amazing

  • @jvenkatonline
    @jvenkatonline2 ай бұрын

    Simple and clear. I have seen multiple tutorials for this functionality, but this is very simple and easy-to-understand logic without any extra steps. Thanks.👍

  • @Maketechstuffs

    @Maketechstuffs

    2 ай бұрын

    Your welcome

  • @jvenkatonline

    @jvenkatonline

    2 ай бұрын

    @@Maketechstuffs particularly you keep the checkbox till the last minute. finally, you hide it (display: none). I like that approach. without any explanation, I could understand what you were doing.

  • @edrisssafi5796
    @edrisssafi57968 күн бұрын

    Very nice

  • @LuisVZMusic
    @LuisVZMusic Жыл бұрын

    good

  • @chrisazuaje892
    @chrisazuaje89211 ай бұрын

    Great video!

  • @Maketechstuffs

    @Maketechstuffs

    11 ай бұрын

    Thanks!

  • @sarahpires2251
    @sarahpires22512 ай бұрын

    Perfect

  • @mikhaildolgov
    @mikhaildolgov Жыл бұрын

    👍

  • @S-Lomar
    @S-Lomar9 ай бұрын

    This guy is the best 😍😍🥰🥰🥰😍🤣😂😂🤪🤪🤪😂😂😂😂

  • @gbbarn

    @gbbarn

    28 күн бұрын

    Yeah, thanks chatGPT lol.

  • @amandacolares7501
    @amandacolares750111 ай бұрын

    great tutorial

  • @Maketechstuffs

    @Maketechstuffs

    11 ай бұрын

    Glad you think so!

  • @HushCode
    @HushCode4 ай бұрын

    Sympa 👍

  • @introvert456
    @introvert456 Жыл бұрын

    You could easily make it by embedding online icons , but it was a fun that you totally made it by yourself ❤️

  • @d.s.h6629

    @d.s.h6629

    Жыл бұрын

    do you mean icons

  • @introvert456

    @introvert456

    Жыл бұрын

    @@d.s.h6629 oh sorry i wrote fonts by mistake

  • @S-Lomar

    @S-Lomar

    9 ай бұрын

    😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍

  • @S-Lomar

    @S-Lomar

    8 ай бұрын

    😂😂😂😂😂😂😂😂😂😂😂😂😂😂

  • @introvert456

    @introvert456

    8 ай бұрын

    @@S-Lomar waddup?

  • @S-Lomar
    @S-Lomar9 ай бұрын

    Well done 🥰🥰🥰🥰🥰😍🥰🥰🥰🥰🥰🥰😍🥰👍👍🥰🥰🥰🥰🥰🥰🥰😍🥰🥰🥰🥰🥰

  • @chrystnx
    @chrystnx11 ай бұрын

    lindo

  • @0xGrowth
    @0xGrowthАй бұрын

    What VsCode extension are you using that reflects the changes you're making to the code directly on the webpage?

  • @Maketechstuffs

    @Maketechstuffs

    Ай бұрын

    Live server

  • @HariBalaKumarR.V
    @HariBalaKumarR.V27 күн бұрын

    Sir,I am newly learning html and css may I please know a proper road map(if you could provide) on how to master html and css or where to start and to end..

  • @Maketechstuffs

    @Maketechstuffs

    27 күн бұрын

    You can learn from many websites. (One name is w3schools.com). Important thing is you have to practise. By creating different forms, web page, websites, etc. Then you'll get the idea of designing. Means how i can make this element this side or that side. How i can make this element below another element. How can i make this element appear in the centre. How can i add border on the top and bottom of this element. How can i show this elements side by side or in a line, or in a row. How can i add bullet points in the list items. How can i make the extra elements to appear from second line if first line is full. , Etc.

  • @namesare4fools
    @namesare4fools Жыл бұрын

    trust me, if your priority is to build a product just use component library

  • @jeloxjdm8298

    @jeloxjdm8298

    Жыл бұрын

    Backend engineer be like:

  • @NadeemJohn-xu4lu
    @NadeemJohn-xu4lu6 ай бұрын

    NADEEMJOHN

  • @priyadharshinis6039
    @priyadharshinis6039 Жыл бұрын

    How to set its button on the right corner please respond me

  • @Maketechstuffs

    @Maketechstuffs

    Жыл бұрын

    Just replace the container class css .container{ background-color: #fff; display: flex; float: right; }

  • @menephyl007
    @menephyl0073 ай бұрын

    wholl

  • @krstev29
    @krstev29 Жыл бұрын

    I just don't know why when I click on the button nothing happens, i need to hide the checkbox behind the button so if works, I think

  • @Maketechstuffs

    @Maketechstuffs

    11 ай бұрын

    No it won't works. If you hide checkbox behind button then how you click checkbox. It possible when you set pointer event none to button. But then also it only works when you click on checkbox and its too small to not visible (as it behind the button). Thats why here used label tag once checkbox bind with button. Now you can place checkbox anywhere in page or even hide it. Now when you click on checkbox or button is equal to click on button(label) and checkbox. You'll find more information on website (search toggle on website).

  • @russellpawlett3564

    @russellpawlett3564

    8 ай бұрын

    I had the same issue, I missed a step in the instructions . Make sure in the container you have -- I missed the id="check" which made the button not transition if clicked on

  • @Rudymaze

    @Rudymaze

    8 ай бұрын

    hi guy i have all these in place but still no transition @@russellpawlett3564

  • @realjonav
    @realjonav Жыл бұрын

    hey! could you help me turn this into a darkmode button?

  • @Maketechstuffs

    @Maketechstuffs

    Жыл бұрын

    You can add text(dark and loght mode) in front of toggle button and use this button as dark and light mode switch. And you can change design little bit.

  • @realjonav

    @realjonav

    Жыл бұрын

    @@Maketechstuffs i was asking if you knew how to actually make the button do a toggle where it would actually change the site to dark mode?

  • @Maketechstuffs

    @Maketechstuffs

    Жыл бұрын

    Ok I'll make video on it.

  • @realjonav

    @realjonav

    Жыл бұрын

    @@Maketechstuffs okay i’ll be waiting! :)

  • @Arman-df4wo

    @Arman-df4wo

    2 ай бұрын

    ​@@realjonav what you can do is add a event listener to that checkbox [event "change"] inside that a callback function this will check if this checked box is checked or not if checked add a class to body where all the colours for dark mode are described

  • @ilTHfeaa
    @ilTHfeaaАй бұрын

    this doesn’t work if there’s multiple though

  • @Maketechstuffs

    @Maketechstuffs

    Ай бұрын

    It works.

  • @oquangtai6889
    @oquangtai6889 Жыл бұрын

    how can i use this button after coding it done?

  • @Maketechstuffs

    @Maketechstuffs

    Жыл бұрын

    You can use it as switch (dark and light mode, to on/off something, show & hide something etc... ) you can use as setting in your software. For example if button is ON show something, if button is OFF hide something. Use as autosave functionality. if button is ON (checkbox is checked) autosave enable, if OFF(checkbox is unchecked) autosave disable. And in many other ways you can use.

  • @Maketechstuffs

    @Maketechstuffs

    11 ай бұрын

    Yes! you can make toggle button functional with js.

  • @manashkamaldey520
    @manashkamaldey520 Жыл бұрын

    good

  • @Maketechstuffs

    @Maketechstuffs

    Жыл бұрын

    Thanks

  • @NadeemJohn-xu4lu
    @NadeemJohn-xu4lu6 ай бұрын

    NADEEMJOHN

Келесі