Add Modern Switch Button in CSS

public/consolidated/css.json

@@ -38,6 +38,19 @@
                 ],
                 "contributors": [],
                 "code": ".button {\n font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;\n background: #0a85ff;\n color: #fff;\n padding: 8px 12px;\n border: none;\n margin: 4px;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.button:hover {\n background: #0974ee;\n color: #fff\n}\n"
+            },
+            {
+                "title": "Switch Button",
+                "description": "A switch button with a beautiful style and effect.",
+                "author": "Haider-Mukhtar",
+                "tags": [
+                    "button",
+                    "switch",
+                    "toggle",
+                    "slider"
+                ],
+                "contributors": [],
+                "code": "/* The switch - the box around the slider */\n.switch {\n  font-size: 17px;\n  position: relative;\n  display: inline-block;\n  width: 3.5em;\n  height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.slider {\n  position: absolute;\n  cursor: pointer;\n  inset: 0;\n  background: #d4acfb;\n  border-radius: 50px;\n  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.slider:before {\n  position: absolute;\n  content: \"\";\n  height: 1.4em;\n  width: 1.4em;\n  left: 0.3em;\n  bottom: 0.3em;\n  background-color: white;\n  border-radius: 50px;\n  box-shadow: 0 0px 20px rgba(0,0,0,0.4);\n  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.switch input:checked + .slider {\n  background: #b84fce;\n}\n\n.switch input:focus + .slider {\n  box-shadow: 0 0 1px #b84fce;\n}\n\n.switch input:checked + .slider:before {\n  transform: translateX(1.6em);\n  width: 2em;\n  height: 2em;\n  bottom: 0;\n}\n\n/* HTML */\n<label class=\"switch\">\n  <input type=\"checkbox\">\n  <span class=\"slider\"></span>\n</label>\n"
             }
         ]
     },

public/data/css.json

@@ -0,0 +1,297 @@
+[
+  {
+    "categoryName": "Typography",
+    "snippets": [
+      {
+        "title": "Responsive Font Sizing",
+        "description": "Adjusts font size based on viewport width.",
+        "code": ["h1 {", "  font-size: calc(1.5rem + 2vw);", "}"],
+        "tags": ["css", "font", "responsive", "typography"],
+        "author": "dostonnabotov"
+      },
+      {
+        "title": "Letter Spacing",
+        "description": "Adds space between letters for better readability.",
+        "code": ["p {", "  letter-spacing: 0.05em;", "}"],
+        "tags": ["css", "typography", "spacing"],
+        "author": "dostonnabotov"
+      },
+      {
+        "title": "Text Transformation",
+        "description": "It can be used to turn text into uppercase or lowercase letters, or capitalize the first letter of each word",
+        "code": [
+          "p.uppercase {",
+          "  text-transform: uppercase;",
+          "}",
+          "",
+          "p.lowercase {",
+          "  text-transform: lowercase;",
+          "}",
+          "",
+          "p.capitalize {",
+          "  text-transform: capitalize;",
+          "}"
+        ],
+        "tags": ["css", "typography", "text"],
+        "author": "Haider-Mukhtar"
+      }
+    ]
+  },
+  {
+    "categoryName": "Layouts",
+    "snippets": [
+      {
+        "title": "Grid layout",
+        "description": "Equal sized items in a responsive grid",
+        "code": [
+          ".grid-container {",
+          "  display: grid",
+          "  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));",
+          "/* Explanation:",
+          "- `auto-fit`: Automatically fits as many columns as possible within the container.",
+          "- `minmax(250px, 1fr)`: Defines a minimum column size of 250px and a maximum size of 1fr (fraction of available space).",
+          "*/",
+          "}",
+          ""
+        ],
+        "tags": ["css", "layout", "grid"],
+        "author": "xshubhamg"
+      },
+      {
+        "title": "Sticky Footer",
+        "description": "Ensures the footer always stays at the bottom of the page.",
+        "code": [
+          "body {",
+          "  display: flex;",
+          "  flex-direction: column;",
+          "  min-height: 100vh;",
+          "}",
+          "",
+          "footer {",
+          "  margin-top: auto;",
+          "}"
+        ],
+        "tags": ["css", "layout", "footer", "sticky"],
+        "author": "dostonnabotov"
+      },
+      {
+        "title": "Equal-Width Columns",
+        "description": "Creates columns with equal widths using flexbox.",
+        "code": [
+          ".columns {",
+          "  display: flex;",
+          "  justify-content: space-between;",
+          "}",
+          "",
+          ".column {",
+          "  flex: 1;",
+          "  margin: 0 10px;",
+          "}"
+        ],
+        "tags": ["css", "flexbox", "columns", "layout"],
+        "author": "dostonnabotov"
+      },
+      {
+        "title": "CSS Reset",
+        "description": "Resets some default browser styles, ensuring consistency across browsers.",
+        "code": [
+          "* {",
+          "  margin: 0;",
+          "  padding: 0;",
+          "  box-sizing: border-box",
+          "}"
+        ],
+        "tags": ["css", "reset", "browser", "layout"],
+        "author": "AmeerMoustafa"
+      },
+      {
+        "title": "Responsive Design",
+        "description": "The different responsive breakpoints.",
+        "code": [
+          "/* Phone */",
+          ".element {",
+          "  margin: 0 10%",
+          "}",
+          "",
+          "/* Tablet */",
+          "@media (min-width: 640px) {",
+          "  .element {",
+          "    margin: 0 20%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop base */",
+          "@media (min-width: 768px) {",
+          "  .element {",
+          "    margin: 0 30%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop large */",
+          "@media (min-width: 1024px) {",
+          "  .element {",
+          "    margin: 0 40%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop extra large */",
+          "@media (min-width: 1280px) {",
+          "  .element {",
+          "    margin: 0 60%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop bige */",
+          "@media (min-width: 1536px) {",
+          "  .element {",
+          "    margin: 0 80%",
+          "  }",
+          "}"
+        ],
+        "tags": ["css", "responsive"],
+        "author": "kruimol"
+      }
+    ]
+  },
+  {
+    "categoryName": "Buttons",
+    "snippets": [
+      {
+        "title": "Button Hover Effect",
+        "description": "Creates a hover effect with a color transition.",
+        "code": [
+          ".button {",
+          "  background-color: #007bff;",
+          "  color: white;",
+          "  padding: 10px 20px;",
+          "  border: none;",
+          "  border-radius: 5px;",
+          "  cursor: pointer;",
+          "  transition: background-color 0.3s ease;",
+          "}",
+          "",
+          ".button:hover {",
+          "  background-color: #0056b3;",
+          "}"
+        ],
+        "tags": ["css", "button", "hover", "transition"],
+        "author": "dostonnabotov"
+      },
+      {
+        "title": "3D Button Effect",
+        "description": "Adds a 3D effect to a button when clicked.",
+        "code": [
+          ".button {",
+          "  background-color: #28a745;",
+          "  color: white;",
+          "  padding: 10px 20px;",
+          "  border: none;",
+          "  border-radius: 5px;",
+          "  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);",
+          "  transition: transform 0.1s;",
+          "}",
+          "",
+          ".button:active {",
+          "  transform: translateY(2px);",
+          "  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);",
+          "}"
+        ],
+        "tags": ["css", "button", "3D", "effect"],
+        "author": "dostonnabotov"
+      },
+      {
+        "title": "MacOS Button",
+        "description": "A macOS-like button style, with hover and shading effects.",
+        "code": [
+          ".button {",
+          " font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;",
+          " background: #0a85ff;",
+          " color: #fff;",
+          " padding: 8px 12px;",
+          " border: none;",
+          " margin: 4px;",
+          " border-radius: 10px;",
+          " cursor: pointer;",
+          " box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/",
+          " font-size: 14px;",
+          " display: flex;",
+          " align-items: center;",
+          " justify-content: center;",
+          " text-decoration: none;",
+          " transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);",
+          "}",
+          ".button:hover {",
+          " background: #0974ee;",
+          " color: #fff",
+          "}"
+        ],
+        "tags": ["css", "button", "macos", "hover", "transition"],
+        "author": "e3nviction"
+      }
+    ]
+  },
+  {
+    "categoryName": "Effects",
+    "snippets": [
+      {
+        "title": "Blur Background",
+        "description": "Applies a blur effect to the background of an element.",
+        "code": [
+          ".blur-background {",
+          "  backdrop-filter: blur(10px);",
+          "  background: rgba(255, 255, 255, 0.5);",
+          "}"
+        ],
+        "tags": ["css", "blur", "background", "effects"],
+        "author": "dostonnabotov"
+      },
+      {
+        "title": "Hover Glow Effect",
+        "description": "Adds a glowing effect on hover.",
+        "code": [
+          ".glow {",
+          "  background-color: #f39c12;",
+          "  padding: 10px 20px;",
+          "  border-radius: 5px;",
+          "  transition: box-shadow 0.3s ease;",
+          "}",
+          "",
+          ".glow:hover {",
+          "  box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);",
+          "}"
+        ],
+        "tags": ["css", "hover", "glow", "effects"],
+        "author": "dostonnabotov"
+      },
+      {
+        "title": "Hover to Reveal Color", 
+        "description": "A card with an image that transitions from grayscale to full color on hover.",
+        "code": [
+          ".card {",
+          "  height: 300px;",
+          "  width: 200px;",
+          "  border-radius: 5px;",
+          "  overflow: hidden;",
+          "}",
+          "",
+          ".card img{",
+          "  height: 100%;",
+          "  width: 100%;",
+          "  object-fit: cover;",
+          "  filter: grayscale(100%);",
+          "  transition: all 0.3s;",
+          "  transition-duration: 200ms;",
+          "  cursor: pointer;",
+          "}",
+          "",
+          ".card:hover img {",
+          "  filter: grayscale(0%);",
+          "  scale: 1.05;",
+          "} "
+        ],
+        "tags": ["css", "hover", "image", "effects"],
+        "author": "Haider-Mukhtar"
+      }
+    ]
+  }
+]

snippets/css/buttons/switch-button.md

@@ -0,0 +1,68 @@
+---
+title: Switch Button
+description: A switch button with a beautiful style and effect.
+author: Haider-Mukhtar
+tags: button,switch,toggle,slider
+---
+
+```css
+/* The switch - the box around the slider */
+.switch {
+  font-size: 17px;
+  position: relative;
+  display: inline-block;
+  width: 3.5em;
+  height: 2em;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background: #d4acfb;
+  border-radius: 50px;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 1.4em;
+  width: 1.4em;
+  left: 0.3em;
+  bottom: 0.3em;
+  background-color: white;
+  border-radius: 50px;
+  box-shadow: 0 0px 20px rgba(0,0,0,0.4);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.switch input:checked + .slider {
+  background: #b84fce;
+}
+
+.switch input:focus + .slider {
+  box-shadow: 0 0 1px #b84fce;
+}
+
+.switch input:checked + .slider:before {
+  transform: translateX(1.6em);
+  width: 2em;
+  height: 2em;
+  bottom: 0;
+}
+
+/* HTML */
+<label class="switch">
+  <input type="checkbox">
+  <span class="slider"></span>
+</label>
+```