{"id":5764,"date":"2022-03-04T01:00:00","date_gmt":"2022-03-04T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/toggle-switch-css\/"},"modified":"2024-07-18T02:19:37","modified_gmt":"2024-07-18T00:19:37","slug":"toggle-switch-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/toggle-switch-css\/","title":{"rendered":"20 Best Toggle Switches For Your Site [Pure CSS Examples]"},"content":{"rendered":"\n<p>If you are into web development you will for sure know what a &#8220;toggle switch&#8221; is. There&#8217;s almost no website or web application that is not using them nowadays.<\/p>\n\n\n\n<p>But if we have to define them somehow, we can say <strong>a Toggle Switch is a design element that allows users to choose between two different states. It&#8217;s commonly used in websites, mobile apps, and other software.<\/strong><\/p>\n\n\n\n<p>A toggle switch is not a native element when used in web development, so developers have devised ways to mimic it using only HTML and CSS. Traditionally, developers used the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\/checkbox\" rel=\"nofollow noopener\" target=\"_blank\">checkbox element<\/a> instead, but a toggle switch is visually more appealing.<\/p>\n\n\n\n<p>CSS toggle switches usually use a hidden checkbox under the hood to keep track of the state of the toggle switch.<\/p>\n\n\n\n<p>\n\t\t\t<a href=\"https:\/\/alvarotrigo.com\/blog\/toggle-switch-css\/\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t<video width=\"680\" height=\"382\" muted autoplay loop playsinline>\n\t\t\t\t<source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/toggle-switch\/toggle-switch-css-example.webm\" type=\"video\/webm\"\/>\n\t\t\t\t<source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/toggle-switch\/toggle-switch-css-example.mp4\" type=\"video\/mp4\" \/><img decoding=\"async\" data-src=\"..\/assets\/imgs\/2022-03-04\/toggle-switch-with-css-only.png\" title=\"Your browser does not support the &lt;video&gt; tag\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n\t\t\t\tYour browser does not support the video tag.\n\t\t\t\t<\/source><\/source><\/video>\n\t\t\t<\/a>\n\t\t<\/p>\n\n\n\n<p>Here&#8217;s a list of the best CSS toggle switch examples we&#8217;ve found out there. All of the toggles in the list are made in <strong>pure CSS<\/strong> and without a single line of JavaScript involved:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2.-css-toggle-switch-with-text\">1. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/oNoJePo\" target=\"_blank\" rel=\"noopener nofollow\">CSS Toggle Switch With Text<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNoJePo\" data-src=\"\/\/codepen.io\/anon\/embed\/oNoJePo?height=450&amp;theme-id=1&amp;slug-hash=oNoJePo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNoJePo\" title=\"CodePen Embed oNoJePo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you need a toggle with a short text like &#8220;Yes&#8221; or &#8220;No&#8221;, then you&#8217;ll love this one by <a href=\"https:\/\/codepen.io\/himalayasingh\" target=\"_blank\" rel=\"noopener nofollow\">Himalaya<\/a>.<\/p>\n\n\n\n<p>This toggle example comes with 18 different effects. And the best thing is that each is better than the previous one!<\/p>\n\n\n\n<p>You can go from the traditional toggle switch to something a bit braver, passing through more normal switches but with a slight touch that makes them stand out.<\/p>\n\n\n\n<p>The animations are all done in pure CSS, and they are super smooth!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3.-pure-css-toggle-switch\">2. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abVPyaJ\" target=\"_blank\" rel=\"noopener nofollow\">Pure CSS Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abVPyaJ\" data-src=\"\/\/codepen.io\/anon\/embed\/abVPyaJ?height=450&amp;theme-id=1&amp;slug-hash=abVPyaJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abVPyaJ\" title=\"CodePen Embed abVPyaJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Created by <a href=\"https:\/\/codepen.io\/mburnette\/\" target=\"_blank\" rel=\"noopener nofollow\">Marcus<\/a>, this is the basic and probably the perfect toggle switch for those looking for a CSS-only toggle switch.<\/p>\n\n\n\n<p>What I personally like about it is that it has an additional animation that takes place just when we click on the toggle, before we release the button.<\/p>\n\n\n\n<p>This small animation cleverly adds a small yet noticeable elastic effect that gives this switch a modern feel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4.-css-toggle-switch-button\">3. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwjEZeJ\" target=\"_blank\" rel=\"noopener nofollow\">CSS Toggle Switch Button<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwjEZeJ\" data-src=\"\/\/codepen.io\/anon\/embed\/RwjEZeJ?height=450&amp;theme-id=1&amp;slug-hash=RwjEZeJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwjEZeJ\" title=\"CodePen Embed RwjEZeJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Some people might be looking for actual buttons with a toggle state. The term toggle switch button can be a bit confusing, but if you are looking for buttons with two states, this example is for you.<\/p>\n\n\n\n<p>This switch was created by <a href=\"https:\/\/codepen.io\/mallendeo\/\" target=\"_blank\" rel=\"noopener nofollow\">Mauricio<\/a> and contains five different switches, two of which are considered buttons.<\/p>\n\n\n\n<p>The <em>skewed<\/em> and the <em>flip<\/em> effects might be what you are looking for!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5.-ios-toggle-switch-css\">4. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/gOXZxNZ\" target=\"_blank\" rel=\"noopener nofollow\">iOs Toggle Switch CSS<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOXZxNZ\" data-src=\"\/\/codepen.io\/anon\/embed\/gOXZxNZ?height=450&amp;theme-id=1&amp;slug-hash=gOXZxNZ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOXZxNZ\" title=\"CodePen Embed gOXZxNZ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It was very probably iOS with their iPhone that made toggle trendy in web development, so it&#8217;s not unexpected that many people like to mimic this same look and feel for their website.<\/p>\n\n\n\n<p>Here&#8217;s a good example by <a href=\"https:\/\/codepen.io\/coldsoul\/\" target=\"_blank\" rel=\"noopener nofollow\">coldsoul<\/a> of a toggle switch that mimics that same effect and that does it with the same design and functionality.<\/p>\n\n\n\n<p>And of course, it also supports touch devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1.-dark-mode-toggle-switch\">5. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/zYPydpB\" target=\"_blank\" rel=\"noopener nofollow\">Dark Mode Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYPydpB\" data-src=\"\/\/codepen.io\/anon\/embed\/zYPydpB?height=450&amp;theme-id=1&amp;slug-hash=zYPydpB&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYPydpB\" title=\"CodePen Embed zYPydpB\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We all love dark mode. And if you plan on implementing it in your site, you&#8217;ll probably use some kind of toggle switch by <a href=\"https:\/\/codepen.io\/fydsa\" target=\"_blank\" rel=\"noopener nofollow\">Saba<\/a>.<\/p>\n\n\n\n<p>This switch has been designed specifically for this purpose and the result is just beautiful.<\/p>\n\n\n\n<p>The switch changes from a white moon icon with a dark background (the night) to a circle representing the sun over a white background.<\/p>\n\n\n\n<p>It&#8217;s a pure CSS switch, so no JavaScript to worry about! Pure beauty!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6.-label-for-toggle-switch\">6. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzEdrKj\" target=\"_blank\" rel=\"noopener nofollow\">Label for Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzEdrKj\" data-src=\"\/\/codepen.io\/anon\/embed\/YzEdrKj?height=450&amp;theme-id=1&amp;slug-hash=YzEdrKj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzEdrKj\" title=\"CodePen Embed YzEdrKj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Every input usually has a label element associated with it to provide a description. When using a toggle switch, you might want to do the same.<\/p>\n\n\n\n<p>While you&#8217;ll probably be able to integrate a label with most of the previous toggles we&#8217;ve named in the article, here&#8217;s an example of another switch that includes the label so you can just copy and paste if you wish.<\/p>\n\n\n\n<p>Notice how the toggle switches its state when clicking over the label. When implemented correctly, this is the expected behavior for labels.<\/p>\n\n\n\n<p>Thanks to <a href=\"https:\/\/codepen.io\/morgoe\/\" target=\"_blank\" rel=\"noopener nofollow\">Morgan<\/a> for creating this beautiful toggle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7.-toggle-switch-with-rolling-label\">7. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNXLZNN\" target=\"_blank\" rel=\"noopener nofollow\">Toggle Switch with Rolling Label<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNXLZNN\" data-src=\"\/\/codepen.io\/anon\/embed\/WNXLZNN?height=450&amp;theme-id=1&amp;slug-hash=WNXLZNN&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNXLZNN\" title=\"CodePen Embed WNXLZNN\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you want to get fancy with the toggle labels, here&#8217;s a great example of bringing it to the extreme.<\/p>\n\n\n\n<p>This toggle created by <a href=\"https:\/\/codepen.io\/jkantner\/\" target=\"_blank\" rel=\"noopener nofollow\">Jon<\/a> will change its label based on its state, but it does it in a quite unexpected way. The label changes with a nice easing effect, and the whole background of the page changes with it.<\/p>\n\n\n\n<p>It is ideal to use as a big element in a full-screen website, especially if you want to use the sliding background effect that comes with it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8.-accessible-toggle-switch-with-check\">8. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/NWweaqW\" target=\"_blank\" rel=\"noopener nofollow\">Accessible Toggle Switch With Check<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWweaqW\" data-src=\"\/\/codepen.io\/anon\/embed\/NWweaqW?height=450&amp;theme-id=1&amp;slug-hash=NWweaqW&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWweaqW\" title=\"CodePen Embed NWweaqW\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Accessibility should be a priority on the web nowadays. This toggle, by the hand of <a href=\"https:\/\/codepen.io\/xirclebox\/\" target=\"_blank\" rel=\"noopener nofollow\">Homer<\/a> switch, proves to us that beauty and design can go hand in hand.<\/p>\n\n\n\n<p>You can test its accessibility by using the keyboard to trigger the change of state. Click on it and then use the <code>spacebar<\/code> key to toggle between both states.<\/p>\n\n\n\n<p>In addition, notice how the element is focusable when you hit the <code>tab<\/code> key, which is the expected behavior for most input elements.<\/p>\n\n\n\n<p>And if you still need more, this toggle also admits the <code>disabled<\/code> attribute and behaves accordingly but not admitting focus or reacting to the keyboard or mouse events.<\/p>\n\n\n\n<h2 id=\"9-darkmode-toggle-switch\" class=\"wp-block-heading\">9. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BagjwBG\" rel=\"nofollow noopener\" target=\"_blank\">Darkmode Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BagjwBG\" data-src=\"\/\/codepen.io\/anon\/embed\/BagjwBG?height=450&amp;theme-id=1&amp;slug-hash=BagjwBG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BagjwBG\" title=\"CodePen Embed BagjwBG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This black-and-white toggle switch is perfect for a dark mode or a dark-themed website.<\/p>\n\n\n\n<p>It includes the styles for the disabled state that will come on handy for some web applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"10.-bootstrap-5-css-toggle-switch\">10. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNYoGxm\" target=\"_blank\" rel=\"noopener nofollow\">Bootstrap 5 CSS Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNYoGxm\" data-src=\"\/\/codepen.io\/anon\/embed\/rNYoGxm?height=450&amp;theme-id=1&amp;slug-hash=rNYoGxm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNYoGxm\" title=\"CodePen Embed rNYoGxm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you are using Bootstrap, you might want to check out this Codepen example created by <a href=\"https:\/\/codepen.io\/nisharg\/\" target=\"_blank\" rel=\"noopener nofollow\">Nisharg<\/a>.<\/p>\n\n\n\n<p>It uses Bootstrap 5 and showcases different toggle switch sizes by using purely HTML and CSS on top of the Bootstrap CSS file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"11.-elastic-toggle-switch-css\">11. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/GROPMZe\" target=\"_blank\" rel=\"noopener nofollow\">Elastic Toggle Switch CSS<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GROPMZe?editors=1111\" data-src=\"\/\/codepen.io\/anon\/embed\/GROPMZe?editors=1111?height=450&amp;theme-id=1&amp;slug-hash=GROPMZe?editors=1111&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GROPMZe?editors=1111\" title=\"CodePen Embed GROPMZe?editors=1111\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This example by <a href=\"https:\/\/codepen.io\/Sivacva\/\" target=\"_blank\" rel=\"noopener nofollow\">Sivacva<\/a> adds a little touch of originality to the traditional switch by adding two additional effects. A glow or shadow that appears when the switch is ON, and some kind of <em>elastic<\/em> effect.<\/p>\n\n\n\n<p>This makes this toggle effect a bit more unique and satisfying to use than others while keeping it simple.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"12.-sun-and-moon-toggle-switch\">12. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BamvwQB\" target=\"_blank\" rel=\"noopener nofollow\">Sun And Moon Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BamvwQB\" data-src=\"\/\/codepen.io\/anon\/embed\/BamvwQB?height=450&amp;theme-id=1&amp;slug-hash=BamvwQB&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BamvwQB\" title=\"CodePen Embed BamvwQB\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This toggle by <a href=\"https:\/\/codepen.io\/Anon_satyam\" target=\"_blank\" rel=\"noopener nofollow\">Satyam<\/a> brings dark mode to the next level by using much more detailed graphics.<\/p>\n\n\n\n<p>It uses the figures of the sun and the moon to represent both states, dark and light modes.<\/p>\n\n\n\n<p>The yellow sun is represented with a blue background as the sky and the white moon with a black sky and a star.<\/p>\n\n\n\n<p>I personally love the animations taking place on this toggle switch. The sun becomes a star and the moon appears from the very bottom.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you are into animations like me, you&#8217;ll also love this collection of <a href=\"https:\/\/alvarotrigo.com\/blog\/css-text-animations\/\">amazing CSS text animations<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<h2 id=\"13-colored-toggle-switch\" class=\"wp-block-heading\">13. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/VwJeMwy\" rel=\"nofollow noopener\" target=\"_blank\">Colored Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwJeMwy\" data-src=\"\/\/codepen.io\/anon\/embed\/VwJeMwy?height=450&amp;theme-id=1&amp;slug-hash=VwJeMwy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwJeMwy\" title=\"CodePen Embed VwJeMwy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This toggle comes in 3 colors: green, red and blue. And in two different shapes: circles and squares. <\/p>\n\n\n\n<p>It also contains styles for the &#8220;focus&#8221; state which adds a subtle shadow on the toggle when it&#8217;s focused.<\/p>\n\n\n\n<p>You can fully customize their colors and sizes to your needs.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"14.-dark-mode-switch-with-text\">14. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/jOaXGyq\" target=\"_blank\" rel=\"noopener nofollow\">Dark Mode Switch With Text<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOaXGyq\" data-src=\"\/\/codepen.io\/anon\/embed\/jOaXGyq?height=450&amp;theme-id=1&amp;slug-hash=jOaXGyq&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOaXGyq\" title=\"CodePen Embed jOaXGyq\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Sometimes, you might want to add a complete word inside the toggle switch instead of using an external label for it.<\/p>\n\n\n\n<p>If that&#8217;s the case, this toggle example by <a href=\"https:\/\/codepen.io\/nadeeshae\" target=\"_blank\" rel=\"noopener nofollow\">Nadeesha<\/a> will for sure bring you joy \ud83d\ude42<\/p>\n\n\n\n<p>In addition to having a complete world, this toggle example is specifically designed to be used for websites that include <strong>dark mode<\/strong>.<\/p>\n\n\n\n<p>You&#8217;ll notice how the whole page becomes black or white depending on its state.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"15.-day-and-night-toggle-switch\">15. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/PoOXJpM\" target=\"_blank\" rel=\"noopener nofollow\">Day and Night Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoOXJpM\" data-src=\"\/\/codepen.io\/anon\/embed\/PoOXJpM?height=450&amp;theme-id=1&amp;slug-hash=PoOXJpM&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoOXJpM\" title=\"CodePen Embed PoOXJpM\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you want to go all over the top with fancy effects, you can not miss this toggle switch by <a href=\"https:\/\/codepen.io\/_Raunaq_\/\" target=\"_blank\" rel=\"noopener nofollow\">Raunaq<\/a>.<\/p>\n\n\n\n<p>This day and night switch is absolutely a piece of art. There&#8217;s so much detail on it. Made with great design taste, this toggle shows a beautiful sun with moving clouds and a moon with falling stars.<\/p>\n\n\n\n<p>It&#8217;s almost unbelievable this is done with pure CSS!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"16.-huge-toggle-switch\">16. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/mdqaBwg\" target=\"_blank\" rel=\"noopener nofollow\">Huge Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdqaBwg\" data-src=\"\/\/codepen.io\/anon\/embed\/mdqaBwg?height=450&amp;theme-id=1&amp;slug-hash=mdqaBwg&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdqaBwg\" title=\"CodePen Embed mdqaBwg\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s another example of a day and night toggle brought to the very extreme by <a href=\"https:\/\/codepen.io\/lurx\" target=\"_blank\" rel=\"noopener nofollow\">Lurx<\/a>.<\/p>\n\n\n\n<p>It is ideal to use in a huge size for websites with a fun or casual vibe that want to catch the visitor&#8217;s attention and create a unique experience for them.<\/p>\n\n\n\n<p>Made with only CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"17.-rolling-toggle-switch\">17. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKybXRa\" target=\"_blank\" rel=\"noopener nofollow\">Rolling Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKybXRa\" data-src=\"\/\/codepen.io\/anon\/embed\/KKybXRa?height=450&amp;theme-id=1&amp;slug-hash=KKybXRa&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKybXRa\" title=\"CodePen Embed KKybXRa\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s a beautifully designed and pure CSS toggle switch coded by <a href=\"https:\/\/codepen.io\/claudz1\/\" target=\"_blank\" rel=\"noopener nofollow\">Claudia<\/a> that some rolling animation.<\/p>\n\n\n\n<p>It uses a figure of the Star Wars robot RD-D2 to add a touch of fun to it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"18.-colored-toggle-switch---rounded-and-rectangular\">18. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/jOaXGKy\" target=\"_blank\" rel=\"noopener nofollow\">Colored Toggle Switch &#8211; Rounded and Rectangular<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOaXGKy\" data-src=\"\/\/codepen.io\/anon\/embed\/jOaXGKy?height=450&amp;theme-id=1&amp;slug-hash=jOaXGKy&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOaXGKy\" title=\"CodePen Embed jOaXGKy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s an example of multiple toggles with different colors in both, rounded and square shapes.<\/p>\n\n\n\n<p>Brought to life by <a href=\"https:\/\/codepen.io\/kunduzyazilim\" target=\"_blank\" rel=\"noopener nofollow\">Kunduz<\/a>, this switch comes with two color intensities depending on the switch state.<\/p>\n\n\n\n<p>I personally like the rounded toggle, but there might be cases where the square one can come in handy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"19.-three-states-css-toggle-switch\">19. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/wvPRrQG\" target=\"_blank\" rel=\"noopener nofollow\">Three States CSS Toggle Switch<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvPRrQG\" data-src=\"\/\/codepen.io\/anon\/embed\/wvPRrQG?height=450&amp;theme-id=1&amp;slug-hash=wvPRrQG&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvPRrQG\" title=\"CodePen Embed wvPRrQG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Who said a toggle switch can only have two labels or two states?<\/p>\n\n\n\n<p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">In this example,<a href=\"https:\/\/codepen.io\/goldsteinr\/\" target=\"_blank\" rel=\"noopener nofollow\"> Ricardo<\/a>\u00a0shows us that a toggle switch can contain three states and, why not,<\/span> three labels if you place them on top of each state.<\/p>\n\n\n\n<p>And all of it was done with no JavaScript at all. Impressive uh?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"20.-pure-css-dark-mode-toggle\">20. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/wvPRrZW\" target=\"_blank\" rel=\"noopener nofollow\">Pure CSS Dark Mode Toggle<\/a><\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvPRrZW\" data-src=\"\/\/codepen.io\/anon\/embed\/wvPRrZW?height=450&amp;theme-id=1&amp;slug-hash=wvPRrZW&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvPRrZW\" title=\"CodePen Embed wvPRrZW\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>A great switch example was brought by <a href=\"https:\/\/codepen.io\/bnthor\" target=\"_blank\" rel=\"noopener nofollow\">Benjamin<\/a> that results in a pretty beautiful toggle element by just using CSS.<\/p>\n\n\n\n<p>In addition, it&#8217;s a toggle switch with two labels that can be quite useful. The easing animations are smooth and add a modern touch to this toggle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/progress-bar-css\/\">Beautiful CSS progress bars<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/hamburger-menu-css\/\">Hamburger Menu with pure CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/10-cool-css-animations-to-add-to-your-website\/\">Cool CSS animations to add to your website<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-round-button\/\">Rounded CSS buttons<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a curated list with the best CSS-only toggle switch elements that we&#8217;ve found out there. From dark mode toggles to toggles with text, images, or icons.<\/p>\n","protected":false},"author":1,"featured_media":5763,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9,16,17],"class_list":["post-5764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-design","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5764"}],"version-history":[{"count":6,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5764\/revisions"}],"predecessor-version":[{"id":15079,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5764\/revisions\/15079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5763"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}