Added On/Off Toggle Switch (#1302)

Rakesh9100 · Aug 2, 2024 · 48a8d82 · 48a8d82
1 parent f7c4679
commit 48a8d82
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/Components/Toggle-Switches/On-Off-Toggle-Switch/index.html b/Components/Toggle-Switches/On-Off-Toggle-Switch/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>On/Off Toggle Switch</title>
+</head>
+<body class="flex items-center justify-center min-h-screen bg-gray-200">
+    <label class="cursor-pointer relative h-[3em] w-[6em] rounded-full bg-[hsl(0,0%,7%)] shadow-[0px_2px_4px_0px_rgb(18,18,18,0.25),0px_4px_8px_0px_rgb(18,18,18,0.35)]">
+        <span class="absolute inset-[0.1em] rounded-full border-[1px] border-[hsl(0,0%,25%)]"></span>
+        <div class="absolute left-[0.5em] top-1/2 flex h-[2em] w-[2em] -translate-y-1/2 items-center justify-center rounded-full bg-white shadow-[inset_0px_2px_2px_0px_hsl(0,0%,85%)]">
+            <div class="h-[1.5em] w-[1.5em] rounded-full bg-[hsl(0,0%,7%)] shadow-[0px_2px_2px_0px_hsl(0,0%,85%)]"></div>
+        </div>
+        <div class="absolute right-[0.5em] top-1/2 h-[0.25em] w-[1.5em] -translate-y-1/2 rounded-full bg-[hsl(0,0%,50%)] shadow-[inset_0px_2px_1px_0px_hsl(0,0%,40%)]"></div>
+        <input class="peer h-[1em] w-[1em] opacity-0" id="toggle" name="toggle" type="checkbox" />
+        <span class="absolute left-[0.25em] top-1/2 flex h-[2.5em] w-[2.5em] -translate-y-1/2 items-center justify-center rounded-full bg-[rgb(26,26,26)] shadow-[inset_4px_4px_4px_0px_rgba(64,64,64,0.25),inset_-4px_-4px_4px_0px_rgba(16,16,16,0.5)] duration-300 peer-checked:left-[calc(100%-2.75em)]">
+        <span class="relative h-full w-full rounded-full">
+        <span class="absolute inset-[0.1em] rounded-full border-[1px] border-[hsl(0,0%,50%)]"></span>
+        </span>
+        </span>
+    </label>
+    <script src="https://cdn.tailwindcss.com"></script>
+</body>
+</html>
diff --git a/assets/html_files/toggle-switches.html b/assets/html_files/toggle-switches.html
@@ -141,6 +141,19 @@ <h1>Minimalist Dark Toggle Switch</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>On/Off Toggle Switch</h1>
+                <div class="preview">
+                    <a href="../../Components/Toggle-Switches/On-Off-Toggle-Switch/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Toggle-Switches/On-Off-Toggle-Switch" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Robo Toggle Switch</h1>
                 <div class="preview">