├── .vscode └── settings.json ├── README.md ├── css ├── color.css ├── normalize.css ├── reset.css ├── responsive.css ├── style.css └── toggleStyle.css ├── index.html └── scripts ├── data.js └── script.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # toggle-button-generator 💛 2 | A list of toggle buttons made with CSS 3 | -------------------------------------------------------------------------------- /css/color.css: -------------------------------------------------------------------------------- 1 | .light-gray { 2 | background-color: #e0e0e0; 3 | } 4 | 5 | .purple-blue { 6 | background-color: #8444ff; 7 | } 8 | 9 | .light-blue { 10 | background-color: #c6e2ff; 11 | } 12 | 13 | .light-mustard { 14 | background-color: #ffea9f; 15 | } 16 | 17 | .light-green { 18 | background-color: #e5f494; 19 | } 20 | 21 | .salmon { 22 | background-color: #6f4242; 23 | } 24 | 25 | .spring-green { 26 | background-color: #99ffcc; 27 | } 28 | 29 | .emerald-green { 30 | background-color: #a1e9ce; 31 | } 32 | 33 | .orchid { 34 | background-color: #e990ff; 35 | } 36 | 37 | .plum { 38 | background-color: #ffc9ff; 39 | } 40 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type="button"], 199 | [type="reset"], 200 | [type="submit"] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type="button"]::-moz-focus-inner, 210 | [type="reset"]::-moz-focus-inner, 211 | [type="submit"]::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type="button"]:-moz-focusring, 222 | [type="reset"]:-moz-focusring, 223 | [type="submit"]:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type="checkbox"], 273 | [type="radio"] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type="number"]::-webkit-inner-spin-button, 283 | [type="number"]::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type="search"] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type="search"]::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /*** box sizing border-box for all elements ***/ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | a { 8 | text-decoration: none; 9 | color: inherit; 10 | cursor: pointer; 11 | } 12 | button { 13 | background-color: transparent; 14 | color: inherit; 15 | border-width: 0; 16 | padding: 0; 17 | cursor: pointer; 18 | } 19 | figure { 20 | margin: 0; 21 | } 22 | input::-moz-focus-inner { 23 | border: 0; 24 | padding: 0; 25 | margin: 0; 26 | } 27 | ul, 28 | ol, 29 | dd { 30 | margin: 0; 31 | padding: 0; 32 | list-style: none; 33 | } 34 | h1, 35 | h2, 36 | h3, 37 | h4, 38 | h5, 39 | h6 { 40 | margin: 0; 41 | font-size: inherit; 42 | font-weight: inherit; 43 | } 44 | p { 45 | margin: 0; 46 | } 47 | cite { 48 | font-style: normal; 49 | } 50 | fieldset { 51 | border-width: 0; 52 | padding: 0; 53 | margin: 0; 54 | } 55 | -------------------------------------------------------------------------------- /css/responsive.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 1024px) { 2 | .container { 3 | width: min(95%, 1200px); 4 | margin: 0 auto; 5 | } 6 | 7 | .toggle-container.show { 8 | left: 0; 9 | width: 100%; 10 | height: 250px; 11 | } 12 | 13 | .code-container { 14 | width: 100%; 15 | left: 0; 16 | } 17 | 18 | .code-block.open { 19 | height: 200vh; 20 | } 21 | 22 | .code-block main { 23 | top: 500px; 24 | display: none; 25 | } 26 | } 27 | 28 | @media (max-width: 768px) { 29 | .flex-wrap { 30 | justify-content: center; 31 | flex-direction: column; 32 | } 33 | 34 | h1 { 35 | font-size: 2rem; 36 | margin-top: 2em; 37 | } 38 | 39 | .toggle-container { 40 | width: min(80%, 320px); 41 | height: 250px; 42 | } 43 | 44 | .row-1 { 45 | height: 170px; 46 | } 47 | 48 | .row-2 { 49 | height: 75px; 50 | } 51 | 52 | .toggle-container.show { 53 | left: 0; 54 | width: 100%; 55 | height: 250px; 56 | } 57 | 58 | .code-container { 59 | width: 100%; 60 | left: 0; 61 | } 62 | 63 | .code-block main { 64 | top: 520px; 65 | display: none; 66 | } 67 | 68 | .toggle-container.show .toggle { 69 | transform: scale(1.05); 70 | } 71 | 72 | #close-btn { 73 | right: 0.5em; 74 | top: 0.5em; 75 | font-size: 1.5rem; 76 | } 77 | 78 | .code-container .code { 79 | overflow: scroll; 80 | padding: 0.5em 1em; 81 | } 82 | 83 | footer { 84 | position: relative; 85 | width: 100%; 86 | bottom: 0; 87 | top: 50px; 88 | } 89 | 90 | footer ul li { 91 | margin: 0 0.5em; 92 | font-size: 0.85rem; 93 | } 94 | 95 | footer p { 96 | font-size: 0.85rem; 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background-color: #fff; 3 | } 4 | 5 | body { 6 | font-family: sans-serif; 7 | } 8 | 9 | body[theme="light"] { 10 | background-color: var(--background-color); 11 | } 12 | 13 | body[theme="dark"] { 14 | --background-color: #000; 15 | } 16 | 17 | .container { 18 | width: min(95%, 1200px); 19 | margin: 0 auto; 20 | } 21 | 22 | h1 { 23 | font-size: 3rem; 24 | text-align: center; 25 | margin: 1em 0; 26 | position: relative; 27 | z-index: 10; 28 | color: #7fa1c1; 29 | letter-spacing: 2px; 30 | font-family: "Alfa Slab One", cursive; 31 | text-shadow: 0 0 1px #000, 0 1px 1px #000, 1px 2px 1px #000, 2px 3px 1px #000, 32 | 3px 4px 1px #000; 33 | } 34 | 35 | .flex-wrap { 36 | display: flex; 37 | flex-wrap: wrap; 38 | align-items: center; 39 | } 40 | 41 | .flex-center { 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | } 46 | 47 | /* code block */ 48 | 49 | .code-block { 50 | position: absolute; 51 | width: 100%; 52 | background-color: #edf8f8; 53 | left: 0; 54 | top: 0; 55 | height: 0; 56 | z-index: 5; 57 | transition: height 300ms ease-in-out; 58 | } 59 | 60 | .code-block.open { 61 | height: 100vh; 62 | } 63 | 64 | .code-block main { 65 | top: 150px; 66 | display: none; 67 | } 68 | 69 | .code-block.open main { 70 | display: block; 71 | } 72 | 73 | #close-btn { 74 | position: absolute; 75 | right: 2em; 76 | top: 1em; 77 | font-size: 2rem; 78 | cursor: pointer; 79 | display: none; 80 | } 81 | 82 | .code-block.open #close-btn { 83 | display: block; 84 | } 85 | 86 | /* code container */ 87 | 88 | .code-container { 89 | position: relative; 90 | width: 60%; 91 | left: 40%; 92 | box-shadow: 0 0 5px #aaa, 0 0 1em #dedede; 93 | } 94 | 95 | .code-container .code { 96 | height: 450px; 97 | border: 3px solid #7a8b8b; 98 | background-color: #fff; 99 | overflow-y: scroll; 100 | padding: 1em 2em; 101 | } 102 | 103 | .tab-links { 104 | display: flex; 105 | background-color: #efefef; 106 | } 107 | .tab-links li { 108 | font-size: 1rem; 109 | padding: 0.65em; 110 | background-color: #efefef; 111 | cursor: pointer; 112 | user-select: none; 113 | } 114 | 115 | .tab-links li.active { 116 | background-color: #7a8b8b; 117 | color: #fff; 118 | } 119 | 120 | .copy-btn-container { 121 | background-color: #efefef; 122 | padding: 0.5em; 123 | border-radius: 0 0 0.75em 0.75em; 124 | } 125 | 126 | /* toggle containers */ 127 | 128 | main { 129 | position: relative; 130 | } 131 | 132 | .toggle-row { 133 | margin: 1em 0; 134 | flex-wrap: wrap; 135 | } 136 | 137 | .toggle-container { 138 | width: min(90%, 250px); 139 | height: 250px; 140 | border-radius: 0.75em; 141 | margin: 1.5em; 142 | box-shadow: 0 0 3px #aaa, 0 0 10px #dedede; 143 | border: 3px solid transparent; 144 | background-color: #fff; 145 | transition: border 150ms ease-in-out, width 350ms ease-in-out; 146 | position: relative; 147 | } 148 | 149 | .toggle-container:hover { 150 | border: 3px solid #2f4f4f; 151 | } 152 | 153 | .row-1 { 154 | height: 180px; 155 | } 156 | 157 | .row-2 { 158 | background-color: #fff; 159 | border-radius: 0 0 0.75em 0.75em; 160 | height: 64px; 161 | display: flex; 162 | align-items: center; 163 | padding: 1em; 164 | box-shadow: 0 0 8px #aaa; 165 | } 166 | 167 | .btn { 168 | font-size: 1.05rem; 169 | text-transform: capitalize; 170 | padding: 0.5em 1em; 171 | border-radius: 0.45em; 172 | font-weight: 700; 173 | transition: all 150ms ease-in-out; 174 | } 175 | 176 | .view-btn { 177 | width: 80%; 178 | background-color: #2da44e; 179 | color: #fff; 180 | padding: 0.75em 1em; 181 | } 182 | 183 | .view-btn:hover, 184 | .copy-btn:hover { 185 | background-color: #2f8748; 186 | } 187 | 188 | .copy-btn { 189 | background-color: #2da44e; 190 | color: #fff; 191 | } 192 | 193 | /* added via JS */ 194 | 195 | .hide { 196 | display: none; 197 | } 198 | 199 | .overflow-hidden { 200 | overflow: hidden; 201 | } 202 | 203 | .toggle-container.show { 204 | z-index: 10; 205 | left: 3em; 206 | top: 150px; 207 | width: 33%; 208 | height: 430px; 209 | margin: 0; 210 | position: absolute; 211 | } 212 | 213 | .toggle-container.show .row-1 { 214 | height: 100%; 215 | } 216 | 217 | .toggle-container.show .row-2 { 218 | display: none; 219 | } 220 | 221 | .toggle-container.show .toggle { 222 | transform: scale(1.2); 223 | } 224 | 225 | .footer-row:nth-child(1) { 226 | background-color: #ddd; 227 | padding: 1em 0; 228 | } 229 | 230 | .footer-row:nth-child(2) { 231 | background-color: #2f4f4f; 232 | } 233 | 234 | footer ul { 235 | display: flex; 236 | justify-content: center; 237 | } 238 | 239 | footer ul li { 240 | margin: 0 1em; 241 | font-size: 1rem; 242 | color: #2f4f4f; 243 | font-weight: 700; 244 | } 245 | 246 | footer p { 247 | text-align: center; 248 | padding: 0.75em 0; 249 | color: #fff; 250 | user-select: none; 251 | } 252 | -------------------------------------------------------------------------------- /css/toggleStyle.css: -------------------------------------------------------------------------------- 1 | /* toggle button 1 */ 2 | 3 | .toggle-btn-1 { 4 | width: 150px; 5 | height: 50px; 6 | position: relative; 7 | display: inline-block; 8 | } 9 | 10 | .toggle-btn-1 input[type="checkbox"] { 11 | position: absolute; 12 | width: 100%; 13 | height: 100%; 14 | border-radius: 30px; 15 | box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2), 16 | -10px -10px 20px 0 rgba(255, 255, 255, 0.6); 17 | appearance: none; 18 | -webkit-appearance: none; 19 | -moz-appearance: none; 20 | cursor: pointer; 21 | transition: all 300ms ease-in-out; 22 | outline: none; 23 | } 24 | 25 | .toggle-btn-1 .circle { 26 | position: absolute; 27 | width: 45px; 28 | height: 45px; 29 | top: 50%; 30 | left: 5px; 31 | transform: translateY(-50%); 32 | border-radius: 50%; 33 | background-color: #fff; 34 | box-shadow: 1px 1px 10px 0 #5ab9ea inset, -5px -5px 20px 0 #5ab9ea inset; 35 | transition: all 450ms ease-in-out; 36 | pointer-events: none; 37 | } 38 | 39 | .toggle-btn-1 .circle::before { 40 | content: "OFF"; 41 | position: absolute; 42 | top: 50%; 43 | left: 50%; 44 | transform: translate(-50%, -50%); 45 | font-family: monospace; 46 | font-size: 1.15rem; 47 | } 48 | 49 | .toggle-btn-1 input[type="checkbox"]:checked { 50 | box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2), 51 | inset -6px -6px 10px 0 rgba(255, 255, 255, 0.6); 52 | } 53 | 54 | .toggle-btn-1 input[type="checkbox"]:checked ~ .circle { 55 | box-shadow: 1px 1px 10px 0 #6bea5a inset, -5px -5px 20px 0 #6bea5a inset; 56 | background-color: #fff; 57 | left: 100px; 58 | transform: translateY(-50%) rotate(360deg); 59 | } 60 | 61 | .toggle-btn-1 input[type="checkbox"]:checked ~ .circle::before { 62 | content: "ON"; 63 | } 64 | 65 | /* toggle button 2 */ 66 | 67 | .toggle-btn-2 { 68 | width: 150px; 69 | height: 50px; 70 | position: relative; 71 | display: inline-block; 72 | } 73 | 74 | .toggle-btn-2 input[type="checkbox"] { 75 | position: absolute; 76 | width: 100%; 77 | height: 100%; 78 | border-radius: 30px; 79 | box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); 80 | appearance: none; 81 | -webkit-appearance: none; 82 | -moz-appearance: none; 83 | cursor: pointer; 84 | background-color: #fff; 85 | transition: all 300ms ease-in-out; 86 | outline: none; 87 | } 88 | 89 | .toggle-btn-2 .circle { 90 | position: absolute; 91 | width: 35px; 92 | height: 35px; 93 | top: 50%; 94 | left: 10px; 95 | transform: translateY(-50%); 96 | border-radius: 50%; 97 | background-color: #000; 98 | transition: all 300ms ease-in-out; 99 | pointer-events: none; 100 | } 101 | 102 | .toggle-btn-2 .circle::before { 103 | content: ""; 104 | position: absolute; 105 | width: 50%; 106 | height: 50%; 107 | background-color: #fff; 108 | top: 50%; 109 | left: 50%; 110 | transform: translate(-50%, -50%); 111 | border-radius: 50%; 112 | transition: all 300ms ease-in-out; 113 | transition-delay: 100ms; 114 | } 115 | 116 | .toggle-btn-2 input[type="checkbox"]:checked { 117 | background-color: #000; 118 | } 119 | 120 | .toggle-btn-2 input[type="checkbox"]:checked ~ .circle { 121 | background-color: #fff; 122 | left: 105px; 123 | } 124 | 125 | .toggle-btn-2 input[type="checkbox"]:checked ~ .circle::before { 126 | width: 25%; 127 | border-radius: 10px; 128 | background-color: #000; 129 | } 130 | 131 | /* toggle button 3 */ 132 | 133 | .toggle-btn-3 { 134 | width: 160px; 135 | height: 45px; 136 | position: relative; 137 | display: inline-block; 138 | } 139 | 140 | .toggle-btn-3 input[type="checkbox"] { 141 | position: absolute; 142 | width: 100%; 143 | height: 100%; 144 | border-radius: 30px; 145 | box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); 146 | background-color: #fff; 147 | appearance: none; 148 | -webkit-appearance: none; 149 | -moz-appearance: none; 150 | cursor: pointer; 151 | outline: none; 152 | z-index: 1; 153 | overflow: hidden; 154 | } 155 | 156 | .toggle-btn-3 input[type="checkbox"]::before { 157 | content: ""; 158 | position: absolute; 159 | width: 0; 160 | height: 100%; 161 | border-radius: 30px; 162 | background-color: #733337; 163 | left: 0; 164 | top: 0; 165 | z-index: -1; 166 | transition: width 300ms ease-in-out; 167 | } 168 | 169 | .toggle-btn-3 .toggle-text { 170 | position: absolute; 171 | width: 40px; 172 | height: 20px; 173 | top: 50%; 174 | left: 10px; 175 | transform: translateY(-50%); 176 | background-color: transparent; 177 | transition: all 300ms ease-in-out; 178 | pointer-events: none; 179 | z-index: 1; 180 | } 181 | 182 | .toggle-btn-3 .toggle-text::before { 183 | content: "OFF"; 184 | position: absolute; 185 | width: 100%; 186 | height: 100%; 187 | color: #733337; 188 | text-align: center; 189 | font-weight: 700; 190 | font-size: 1.15rem; 191 | transition: all 300ms ease-in-out; 192 | transition-delay: 100ms; 193 | } 194 | 195 | .toggle-btn-3 input[type="checkbox"]:checked::before { 196 | width: 100%; 197 | } 198 | 199 | .toggle-btn-3 input[type="checkbox"]:checked ~ .toggle-text { 200 | left: 110px; 201 | } 202 | 203 | .toggle-btn-3 input[type="checkbox"]:checked ~ .toggle-text::before { 204 | content: "ON"; 205 | color: #fff; 206 | } 207 | 208 | /* toggle button 4 */ 209 | 210 | .toggle-btn-4 { 211 | width: 150px; 212 | height: 50px; 213 | position: relative; 214 | display: inline-block; 215 | } 216 | 217 | .toggle-btn-4 input[type="checkbox"] { 218 | position: absolute; 219 | width: 100%; 220 | height: 100%; 221 | border-radius: 30px; 222 | box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); 223 | appearance: none; 224 | -webkit-appearance: none; 225 | -moz-appearance: none; 226 | cursor: pointer; 227 | background-color: #fff; 228 | transition: all 300ms ease-in-out; 229 | outline: none; 230 | } 231 | 232 | .toggle-btn-4 .circle { 233 | position: absolute; 234 | width: 35px; 235 | height: 35px; 236 | top: 50%; 237 | left: 10px; 238 | transform: translateY(-50%); 239 | border: 8px solid #0d4f8b; 240 | border-radius: 50%; 241 | background-color: transparent; 242 | transition: all 300ms ease-in-out; 243 | pointer-events: none; 244 | } 245 | 246 | .toggle-btn-4 .circle::before { 247 | content: ""; 248 | position: absolute; 249 | width: 60%; 250 | height: 80%; 251 | top: -2px; 252 | left: 0; 253 | border-radius: 50%; 254 | transform: rotate(30deg) scale(0); 255 | transition: all 300ms ease-in-out; 256 | transition-delay: 50ms; 257 | } 258 | 259 | .toggle-btn-4 input[type="checkbox"]:checked { 260 | background-color: #0d4f8b; 261 | } 262 | 263 | .toggle-btn-4 input[type="checkbox"]:checked ~ .circle { 264 | border: 0; 265 | background-color: #fff; 266 | left: 105px; 267 | } 268 | 269 | .toggle-btn-4 input[type="checkbox"]:checked ~ .circle::before { 270 | transform: rotate(30deg) scale(1); 271 | background-color: #0d4f8b; 272 | } 273 | 274 | /* toggle button 6 */ 275 | 276 | .toggle-btn-5 { 277 | width: 150px; 278 | height: 50px; 279 | position: relative; 280 | display: inline-block; 281 | } 282 | 283 | .toggle-btn-5 input[type="checkbox"] { 284 | position: absolute; 285 | width: 100%; 286 | height: 100%; 287 | border-radius: 30px; 288 | box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); 289 | appearance: none; 290 | -webkit-appearance: none; 291 | -moz-appearance: none; 292 | cursor: pointer; 293 | background-color: #ff7441; 294 | outline: none; 295 | overflow: hidden; 296 | } 297 | 298 | .toggle-btn-5 input[type="checkbox"]::before { 299 | content: ""; 300 | position: absolute; 301 | width: 120%; 302 | height: 200%; 303 | left: 50%; 304 | top: 50%; 305 | transform: translate(-50%, -50%) scale(0); 306 | transform-origin: 0 50%; 307 | border-radius: 50%; 308 | background-color: #78ca20; 309 | transition: all 450ms ease-in-out; 310 | } 311 | 312 | .toggle-btn-5 .circle { 313 | position: absolute; 314 | width: 25px; 315 | height: 25px; 316 | top: 50%; 317 | transform: translateY(-50%); 318 | border-radius: 50%; 319 | background-color: #fff; 320 | transition: all 450ms ease-in-out; 321 | pointer-events: none; 322 | } 323 | 324 | .toggle-btn-5 .left-circle { 325 | left: 10px; 326 | } 327 | 328 | .toggle-btn-5 .right-circle { 329 | left: 115px; 330 | background-color: #ff7441; 331 | } 332 | 333 | .toggle-btn-5 input[type="checkbox"]:checked::before { 334 | transform: translate(-50%, -50%) scale(1); 335 | } 336 | 337 | .toggle-btn-5 input[type="checkbox"]:checked ~ .left-circle { 338 | background: #78ca20; 339 | } 340 | 341 | .toggle-btn-5 input[type="checkbox"]:checked ~ .right-circle { 342 | background: #fff; 343 | } 344 | 345 | /* toggle button 6 */ 346 | 347 | .toggle-btn-6 { 348 | width: 100px; 349 | height: 30px; 350 | position: relative; 351 | display: inline-block; 352 | } 353 | 354 | .toggle-btn-6 input[type="checkbox"] { 355 | position: absolute; 356 | width: 100%; 357 | height: 100%; 358 | border-radius: 100vmax; 359 | appearance: none; 360 | -webkit-appearance: none; 361 | -moz-appearance: none; 362 | cursor: pointer; 363 | background-color: #cdd0d0; 364 | transition: all 150ms ease-in-out; 365 | outline: none; 366 | } 367 | 368 | .toggle-btn-6 .circle { 369 | position: absolute; 370 | width: 55%; 371 | height: 135%; 372 | top: 50%; 373 | left: -5%; 374 | transform: translateY(-50%); 375 | border-radius: 100vmax; 376 | background-color: #7a8b8b; 377 | box-shadow: 0 2px 5px #696969; 378 | transition: all 150ms ease-in-out; 379 | pointer-events: none; 380 | } 381 | 382 | .toggle-btn-6 .circle::before { 383 | content: "OFF"; 384 | position: absolute; 385 | top: 50%; 386 | left: 50%; 387 | transform: translate(-50%, -50%); 388 | font-weight: 700; 389 | color: #f2f3f3; 390 | } 391 | 392 | .toggle-btn-6 input[type="checkbox"]:checked { 393 | background-color: #49e20e; 394 | } 395 | 396 | .toggle-btn-6 input[type="checkbox"]:checked ~ .circle { 397 | background-color: #f2f3f3; 398 | left: 50%; 399 | } 400 | 401 | .toggle-btn-6 input[type="checkbox"]:checked ~ .circle::before { 402 | content: "ON"; 403 | color: #4cbb17; 404 | } 405 | 406 | /* toggle button 7 */ 407 | 408 | .toggle-btn-7 { 409 | width: 100px; 410 | height: 30px; 411 | position: relative; 412 | display: inline-block; 413 | } 414 | 415 | .toggle-btn-7 input[type="checkbox"] { 416 | position: absolute; 417 | width: 100%; 418 | height: 100%; 419 | border-radius: 100vmax; 420 | appearance: none; 421 | -webkit-appearance: none; 422 | -moz-appearance: none; 423 | cursor: pointer; 424 | background-color: #f2f3f3; 425 | transition: all 250ms ease-in-out; 426 | outline: none; 427 | } 428 | 429 | .toggle-btn-7 .circle { 430 | position: absolute; 431 | width: 45%; 432 | height: 150%; 433 | top: 50%; 434 | left: -5%; 435 | transform: translateY(-50%); 436 | border-radius: 100vmax; 437 | background-color: #871f78; 438 | box-shadow: 0 2px 5px #696969; 439 | transition: all 250ms ease-in-out; 440 | pointer-events: none; 441 | } 442 | 443 | .toggle-btn-7 .circle::before { 444 | content: ""; 445 | position: absolute; 446 | width: 0; 447 | height: 50%; 448 | top: 50%; 449 | left: 50%; 450 | transform: translate(-50%, -50%); 451 | border: 3px solid #f2f3f3; 452 | border-radius: 100vmax; 453 | transition: all 250ms ease-in-out; 454 | } 455 | 456 | .toggle-btn-7 input[type="checkbox"]:checked { 457 | background-color: #871f78; 458 | } 459 | 460 | .toggle-btn-7 input[type="checkbox"]:checked ~ .circle { 461 | background-color: #f2f3f3; 462 | left: 60%; 463 | } 464 | 465 | .toggle-btn-7 input[type="checkbox"]:checked ~ .circle::before { 466 | width: 50%; 467 | border: 5px solid #871f78; 468 | } 469 | 470 | /* toggle button 8 */ 471 | 472 | .toggle-btn-8 { 473 | width: 130px; 474 | height: 40px; 475 | position: relative; 476 | display: inline-block; 477 | cursor: pointer; 478 | } 479 | 480 | .toggle-btn-8 input[type="checkbox"] { 481 | position: absolute; 482 | width: 50%; 483 | height: 100%; 484 | border-radius: 100vmax; 485 | appearance: none; 486 | -webkit-appearance: none; 487 | -moz-appearance: none; 488 | background-color: transparent; 489 | border: 3px solid #545454; 490 | transition: all 250ms ease-in-out; 491 | outline: none; 492 | cursor: pointer; 493 | } 494 | 495 | .toggle-btn-8 input[type="checkbox"]::after { 496 | content: "FF"; 497 | position: absolute; 498 | top: 50%; 499 | left: 110%; 500 | font-size: 2.5rem; 501 | font-weight: 900; 502 | color: #545454; 503 | transform: translateY(-50%); 504 | transition: all 250ms ease-in-out; 505 | pointer-events: none; 506 | } 507 | 508 | .toggle-btn-8 .circle { 509 | position: absolute; 510 | width: 30px; 511 | height: 30px; 512 | top: 50%; 513 | left: 5px; 514 | border-radius: 100vmax; 515 | background-color: #545454; 516 | transform: translateY(-50%); 517 | transition: all 250ms ease-in-out; 518 | pointer-events: none; 519 | } 520 | 521 | .toggle-btn-8 input[type="checkbox"]:checked { 522 | border: 3px solid #ff5f01; 523 | } 524 | 525 | .toggle-btn-8 input[type="checkbox"]:checked::after { 526 | content: "N"; 527 | color: #ff5f01; 528 | } 529 | 530 | .toggle-btn-8 input[type="checkbox"]:checked ~ .circle { 531 | background-color: #ff5f01; 532 | left: calc(50% - 36px); 533 | } 534 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | Toggle Button Generator 27 | 28 | 29 |
30 |
31 |
32 |
33 | 39 |
40 |
41 | 42 |
43 |
44 |
45 |
46 | 47 |
48 |

Toggle Button Generator

49 |
50 |
55 |
56 | 60 |
61 |
62 | 63 |
64 |
65 |
70 |
71 | 75 |
76 |
77 | 78 |
79 |
80 |
85 |
86 | 90 |
91 |
92 | 93 |
94 |
95 |
100 |
101 | 105 |
106 |
107 | 108 |
109 |
110 |
115 |
116 | 121 |
122 |
123 | 124 |
125 |
126 |
131 |
132 | 136 |
137 |
138 | 139 |
140 |
141 |
146 |
147 | 151 |
152 |
153 | 154 |
155 |
156 |
161 |
162 | 166 |
167 |
168 | 169 |
170 |
171 |
172 |
173 | 190 | 191 | 192 | 193 | 194 | -------------------------------------------------------------------------------- /scripts/data.js: -------------------------------------------------------------------------------- 1 | data = { 2 | "toggle-btn-1": { 3 | html: [ 4 | '<label class="toggle-btn">\n', 5 | '  <input type="checkbox" />\n', 6 | '  <span class="circle"></span>\n', 7 | "</label>", 8 | ], 9 | 10 | css: [ 11 | "*,\n", 12 | "::before,\n", 13 | "::after{\n", 14 | "  margin:0;\n", 15 | "  padding:0;\n", 16 | "  box-sizing:border-box;\n", 17 | "}\n", 18 | ".toggle-btn {\n", 19 | "  width: 150px;\n", 20 | "  height: 50px;\n", 21 | "  position: relative;\n", 22 | "  display: inline-block;\n", 23 | "}\n", 24 | '.toggle-btn input[type="checkbox"] {\n', 25 | "  position: absolute;\n", 26 | "  width: 100%;\n", 27 | "  height: 100%;\n", 28 | "  border-radius: 30px;\n", 29 | "  box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.2),\n", 30 | "   -10px -10px 20px 0 rgba(255, 255, 255, 0.5);\n", 31 | "  appearance: none;\n", 32 | "  -webkit-appearance: none;\n", 33 | "  -moz-appearance: none;\n", 34 | "  cursor: pointer;\n", 35 | "  transition: all 300ms ease-in-out;\n", 36 | "  outline: none;\n", 37 | "}\n", 38 | ".toggle-btn .circle {\n", 39 | "  position: absolute;\n", 40 | "  width: 45px;\n", 41 | "  height: 45px;\n", 42 | "  top: 50%;\n", 43 | "  left: 5px;\n", 44 | "  transform: translateY(-50%);\n", 45 | "  border-radius: 50%;\n", 46 | "  background-color: #fff;\n", 47 | "  box-shadow: 1px 1px 10px 0 #5ab9ea inset,\n", 48 | "  -5px -5px 20px 0 #5ab9ea inset;\n", 49 | "  transition: all 450ms ease-in-out;\n", 50 | "  pointer-events: none;\n", 51 | "}\n", 52 | ".toggle-btn .circle::before {\n", 53 | '  content: "OFF";\n', 54 | "  position: absolute;\n", 55 | "  top: 50%;\n", 56 | "  left: 50%;\n", 57 | "  transform: translate(-50%, -50%);\n", 58 | "  font-family: monospace;\n", 59 | "  font-size: 1.15rem;\n", 60 | "}\n", 61 | '.toggle-btn input[type="checkbox"]:checked {\n', 62 | "  box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2),\n", 63 | "  inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);\n", 64 | "}\n", 65 | '.toggle-btn input[type="checkbox"]:checked ~ .circle {\n', 66 | "  box-shadow: 1px 1px 10px 0 #6bea5a inset, -5px -5px 20px 0 #6bea5a inset;\n", 67 | "  background-color: #fff;\n", 68 | "  left: 100px;\n", 69 | "  transform: translateY(-50%) rotate(360deg);\n", 70 | "}\n", 71 | '.toggle-btn input[type="checkbox"]:checked ~ .circle::before {\n', 72 | '  content: "ON";\n', 73 | "}\n", 74 | ], 75 | }, 76 | "toggle-btn-2": { 77 | html: [ 78 | '<label class="toggle-btn">\n', 79 | '  <input type="checkbox" />\n', 80 | '  <span class="circle"></span>\n', 81 | "</label>", 82 | ], 83 | 84 | css: [ 85 | "*,\n", 86 | "::before,\n", 87 | "::after{\n", 88 | "  margin:0;\n", 89 | "  padding:0;\n", 90 | "  box-sizing:border-box;\n", 91 | "}\n", 92 | ".toggle-btn {\n", 93 | "  width: 150px;\n", 94 | "  height: 50px;\n", 95 | "  position: relative;\n", 96 | "  display: inline-block;\n", 97 | "}\n", 98 | '.toggle-btn input[type="checkbox"] {\n', 99 | "  position: absolute;\n", 100 | "  width: 100%;\n", 101 | "  height: 100%;\n", 102 | "  border-radius: 30px;\n", 103 | "  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);\n", 104 | "  appearance: none;\n", 105 | "  -webkit-appearance: none;\n", 106 | "  -moz-appearance: none;\n", 107 | "  cursor: pointer;\n", 108 | "  transition: all 300ms ease-in-out;\n", 109 | "  outline: none;\n", 110 | "  background-color: #fff;\n", 111 | "}\n", 112 | ".toggle-btn .circle {\n", 113 | "  position: absolute;\n", 114 | "  width: 35px;\n", 115 | "  height: 35px;\n", 116 | "  top: 50%;\n", 117 | "  left: 10px;\n", 118 | "  transform: translateY(-50%);\n", 119 | "  border-radius: 50%;\n", 120 | "  background-color: #000;\n", 121 | "  transition: all 300ms ease-in-out;\n", 122 | "  pointer-events: none;\n", 123 | "}\n", 124 | ".toggle-btn .circle::before {\n", 125 | '  content: "";\n', 126 | "  width: 50%;\n", 127 | "  height: 50%;", 128 | "  background-color: #fff;\n", 129 | "  position: absolute;\n", 130 | "  top: 50%;\n", 131 | "  left: 50%;\n", 132 | "  transform: translate(-50%, -50%);\n", 133 | "  border-radius: 50%;\n", 134 | "  transition: all 300ms ease-in-out;\n", 135 | "  transition-delay: 100ms;\n", 136 | "}\n", 137 | '.toggle-btn input[type="checkbox"]:checked {\n', 138 | "  background-color: #000;\n", 139 | "}\n", 140 | '.toggle-btn input[type="checkbox"]:checked ~ .circle {\n', 141 | "  background-color: #fff;\n", 142 | "  left: 105px;\n", 143 | "}\n", 144 | '.toggle-btn input[type="checkbox"]:checked ~ .circle::before {\n', 145 | "  width: 25%;\n", 146 | "  border-radius: 10px;\n", 147 | "  background-color: #000;\n", 148 | "}\n", 149 | ], 150 | }, 151 | "toggle-btn-3": { 152 | html: [ 153 | '<label class="toggle-btn">\n', 154 | '  <input type="checkbox" />\n', 155 | '  <span class="toggle-text"></span>\n', 156 | "</label>", 157 | ], 158 | 159 | css: [ 160 | "*,\n", 161 | "::before,\n", 162 | "::after{\n", 163 | "  margin:0;\n", 164 | "  padding:0;\n", 165 | "  box-sizing:border-box;\n", 166 | "}\n", 167 | ".toggle-btn {\n", 168 | "  width: 160px;\n", 169 | "  height: 45px;\n", 170 | "  position: relative;\n", 171 | "  display: inline-block;\n", 172 | "}\n", 173 | '.toggle-btn input[type="checkbox"] {\n', 174 | "  position: absolute;\n", 175 | "  width: 100%;\n", 176 | "  height: 100%;\n", 177 | "  border-radius: 30px;\n", 178 | "  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);\n", 179 | "  appearance: none;\n", 180 | "  -webkit-appearance: none;\n", 181 | "  -moz-appearance: none;\n", 182 | "  cursor: pointer;\n", 183 | "  transition: all 300ms ease-in-out;\n", 184 | "  outline: none;\n", 185 | "  background-color: #fff;\n", 186 | "  z-index: 1;\n", 187 | "  overflow: hidden;\n", 188 | "}\n", 189 | '.toggle-btn input[type="checkbox"]::before {\n', 190 | '  content: "";\n', 191 | "  position: absolute;\n", 192 | "  width: 0;\n", 193 | "  height: 100%;\n", 194 | "  border-radius: 30px;\n", 195 | "  background-color: #733337;\n", 196 | "  left: 0;\n", 197 | "  top: 0;\n", 198 | "  z-index: -1;\n", 199 | "  transition: width 300ms ease-in-out;\n", 200 | "}\n", 201 | ".toggle-btn .toggle-text {\n", 202 | "  position: absolute;\n", 203 | "  width: 40px;\n", 204 | "  height: 20px;\n", 205 | "  top: 50%;\n", 206 | "  left: 10px;\n", 207 | "  transform: translateY(-50%);\n", 208 | "  background-color: transparent;\n", 209 | "  transition: all 300ms ease-in-out;\n", 210 | "  pointer-events: none;\n", 211 | "  z-index: 1;\n", 212 | "}\n", 213 | ".toggle-btn .toggle-text::before {\n", 214 | '  content: "OFF";\n', 215 | "  position: absolute;\n", 216 | "  width: 100%;\n", 217 | "  height: 100%;\n", 218 | "  color: #733337;\n", 219 | "  text-align: center;\n", 220 | "  font-weight: 700;\n", 221 | "  font-size: 1.15rem;\n", 222 | "  transition: all 300ms ease-in-out;\n", 223 | "  transition-delay: 100ms;\n", 224 | "  font-family:sans-serif;\n", 225 | "}\n", 226 | '.toggle-btn input[type="checkbox"]:checked::before {\n', 227 | "  width: 100%;\n", 228 | "}\n", 229 | '.toggle-btn input[type="checkbox"]:checked ~ .toggle-text {\n', 230 | "  left: 110px;\n", 231 | "}\n", 232 | '.toggle-btn input[type="checkbox"]:checked ~ .toggle-text::before {\n', 233 | '  content: "ON";\n', 234 | "  color: #fff;\n", 235 | "}\n", 236 | ], 237 | }, 238 | "toggle-btn-4": { 239 | html: [ 240 | '<label class="toggle-btn">\n', 241 | '  <input type="checkbox" />\n', 242 | '  <span class="circle"></span>\n', 243 | "</label>", 244 | ], 245 | 246 | css: [ 247 | "*,\n", 248 | "::before,\n", 249 | "::after{\n", 250 | "  margin:0;\n", 251 | "  padding:0;\n", 252 | "  box-sizing:border-box;\n", 253 | "}\n", 254 | ".toggle-btn {\n", 255 | "  width: 150px;\n", 256 | "  height: 50px;\n", 257 | "  position: relative;\n", 258 | "  display: inline-block;\n", 259 | "}\n", 260 | '.toggle-btn input[type="checkbox"] {\n', 261 | "  position: absolute;\n", 262 | "  width: 100%;\n", 263 | "  height: 100%;\n", 264 | "  border-radius: 30px;\n", 265 | "  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);\n", 266 | "  appearance: none;\n", 267 | "  -webkit-appearance: none;\n", 268 | "  -moz-appearance: none;\n", 269 | "  cursor: pointer;\n", 270 | "  transition: all 300ms ease-in-out;\n", 271 | "  outline: none;\n", 272 | "  background-color: #fff;\n", 273 | "}\n", 274 | ".toggle-btn .circle {\n", 275 | "  position: absolute;\n", 276 | "  width: 35px;\n", 277 | "  height: 35px;\n", 278 | "  top: 50%;\n", 279 | "  left: 10px;\n", 280 | "  transform: translateY(-50%);\n", 281 | "  background-color: transparent;\n", 282 | "  transition: all 300ms ease-in-out;\n", 283 | "  pointer-events: none;\n", 284 | "  border: 8px solid #0d4f8b;\n", 285 | "  border-radius: 50%;\n", 286 | "}\n", 287 | ".toggle-btn .circle::before {\n", 288 | '  content: "";\n', 289 | "  position: absolute;\n", 290 | "  width: 60%;\n", 291 | "  height: 80%;\n", 292 | "  top: -2px;\n", 293 | "  left: 0;\n", 294 | "  border-radius: 50%;\n", 295 | "  transform: rotate(30deg) scale(0);\n", 296 | "  transition: all 300ms ease-in-out;\n", 297 | "  transition-delay: 50ms;\n", 298 | "}\n", 299 | '.toggle-btn input[type="checkbox"]:checked {\n', 300 | "  background-color: #0d4f8b;\n", 301 | "}\n", 302 | '.toggle-btn input[type="checkbox"]:checked ~ .circle {\n', 303 | "  left: 105px;\n", 304 | "  border: 0;\n", 305 | "  background-color: #fff;\n", 306 | "}\n", 307 | '.toggle-btn input[type="checkbox"]:checked ~ .circle::before {\n', 308 | "  background-color: #0d4f8b;\n", 309 | "  transform: rotate(30deg) scale(1);\n", 310 | "}\n", 311 | ], 312 | }, 313 | "toggle-btn-5": { 314 | html: [ 315 | '<label class="toggle-btn">\n', 316 | '  <input type="checkbox" />\n', 317 | '  <span class="circle left-circle"></span>\n', 318 | '  <span class="circle right-circle"></span>\n', 319 | "</label>", 320 | ], 321 | 322 | css: [ 323 | "*,\n", 324 | "::before,\n", 325 | "::after{\n", 326 | "  margin:0;\n", 327 | "  padding:0;\n", 328 | "  box-sizing:border-box;\n", 329 | "}\n", 330 | ".toggle-btn {\n", 331 | "  width: 150px;\n", 332 | "  height: 50px;\n", 333 | "  position: relative;\n", 334 | "  display: inline-block;\n", 335 | "}\n", 336 | '.toggle-btn input[type="checkbox"] {\n', 337 | "  position: absolute;\n", 338 | "  width: 100%;\n", 339 | "  height: 100%;\n", 340 | "  border-radius: 30px;\n", 341 | "  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);\n", 342 | "  appearance: none;\n", 343 | "  -webkit-appearance: none;\n", 344 | "  -moz-appearance: none;\n", 345 | "  cursor: pointer;\n", 346 | "  transition: all 300ms ease-in-out;\n", 347 | "  outline: none;\n", 348 | "  background-color: #ff7441;\n", 349 | "  overflow: hidden;\n", 350 | "}\n", 351 | '.toggle-btn input[type="checkbox"]::before {\n', 352 | '  content: "";\n', 353 | "  position: absolute;\n", 354 | "  width: 120%;\n", 355 | "  height: 200%;\n", 356 | "  left: 50%;\n", 357 | "  top: 50%;\n", 358 | "  transform: translate(-50%, -50%) scale(0);\n", 359 | "  transform-origin: 0 50%;\n", 360 | "  border-radius: 50%;\n", 361 | "  background-color: #78ca20;\n", 362 | "  transition: all 450ms ease-in-out;\n", 363 | "}\n", 364 | ".toggle-btn .circle {\n", 365 | "  position: absolute;\n", 366 | "  width: 25px;\n", 367 | "  height: 25px;\n", 368 | "  top: 50%;\n", 369 | "  transform: translateY(-50%);\n", 370 | "  background-color: #fff;\n", 371 | "  transition: all 450ms ease-in-out;\n", 372 | "  pointer-events: none;\n", 373 | "  border-radius: 50%;\n", 374 | "}\n", 375 | ".toggle-btn .left-circle {\n", 376 | "  left: 10px;\n", 377 | "}\n", 378 | ".toggle-btn .right-circle {\n", 379 | "  left: 115px;\n", 380 | "  background-color: #ff7441;\n", 381 | "}\n", 382 | '.toggle-btn input[type="checkbox"]:checked::before {\n', 383 | "  transform: translate(-50%, -50%) scale(1);\n", 384 | "}\n", 385 | '.toggle-btn input[type="checkbox"]:checked ~ .left-circle {\n', 386 | "  background: #78ca20;\n", 387 | "}\n", 388 | '.toggle-btn input[type="checkbox"]:checked ~ .right-circle {\n', 389 | "  background: #fff;\n", 390 | "}\n", 391 | ], 392 | }, 393 | "toggle-btn-6": { 394 | html: [ 395 | '<label class="toggle-btn">\n', 396 | '  <input type="checkbox" />\n', 397 | '  <span class="circle"></span>\n', 398 | "</label>", 399 | ], 400 | 401 | css: [ 402 | "*,\n", 403 | "::before,\n", 404 | "::after{\n", 405 | "  margin:0;\n", 406 | "  padding:0;\n", 407 | "  box-sizing:border-box;\n", 408 | "}\n", 409 | ".toggle-btn {\n", 410 | "  width: 100px;\n", 411 | "  height: 30px;\n", 412 | "  position: relative;\n", 413 | "  display: inline-block;\n", 414 | "}\n", 415 | '.toggle-btn input[type="checkbox"] {\n', 416 | "  position: absolute;\n", 417 | "  width: 100%;\n", 418 | "  height: 100%;\n", 419 | "  border-radius: 100vmax;\n", 420 | "  appearance: none;\n", 421 | "  -webkit-appearance: none;\n", 422 | "  -moz-appearance: none;\n", 423 | "  cursor: pointer;\n", 424 | "  transition: all 150ms ease-in-out;\n", 425 | "  outline: none;\n", 426 | "  background-color: #cdd0d0;\n", 427 | "}\n", 428 | ".toggle-btn .circle {\n", 429 | "  position: absolute;\n", 430 | "  width: 55%;\n", 431 | "  height: 135%;\n", 432 | "  top: 50%;\n", 433 | "  left: -5%;\n", 434 | "  transform: translateY(-50%);\n", 435 | "  background-color: #7a8b8b;\n", 436 | "  transition: all 150ms ease-in-out;\n", 437 | "  pointer-events: none;\n", 438 | "  border-radius: 100vmax;\n", 439 | "  box-shadow: 0 2px 5px #696969;\n", 440 | "}\n", 441 | ".toggle-btn .circle::before {\n", 442 | '  content: "OFF";\n', 443 | "  position: absolute;\n", 444 | "  top: 50%;\n", 445 | "  left: 50%;\n", 446 | "  transform: translate(-50%, -50%);\n", 447 | "  font-weight: 700;\n", 448 | "  color: #f2f3f3;\n", 449 | "  font-family:sans-serif;\n", 450 | "}\n", 451 | '.toggle-btn input[type="checkbox"]:checked {\n', 452 | "  background-color: #49e20e;\n", 453 | "}\n", 454 | '.toggle-btn input[type="checkbox"]:checked ~ .circle {\n', 455 | "  background-color: #f2f3f3;\n", 456 | "  left: 50%;\n", 457 | "}\n", 458 | '.toggle-btn input[type="checkbox"]:checked ~ .circle::before {\n', 459 | '  content: "ON";\n', 460 | "  color: #4cbb17;\n", 461 | "}\n", 462 | ], 463 | }, 464 | "toggle-btn-7": { 465 | html: [ 466 | '<label class="toggle-btn">\n', 467 | '  <input type="checkbox" />\n', 468 | '  <span class="circle"></span>\n', 469 | "</label>", 470 | ], 471 | 472 | css: [ 473 | "*,\n", 474 | "::before,\n", 475 | "::after{\n", 476 | "  margin:0;\n", 477 | "  padding:0;\n", 478 | "  box-sizing:border-box;\n", 479 | "}\n", 480 | ".toggle-btn {\n", 481 | "  width: 100px;\n", 482 | "  height: 30px;\n", 483 | "  position: relative;\n", 484 | "  display: inline-block;\n", 485 | "}\n", 486 | '.toggle-btn input[type="checkbox"] {\n', 487 | "  position: absolute;\n", 488 | "  width: 100%;\n", 489 | "  height: 100%;\n", 490 | "  border-radius: 100vmax;\n", 491 | "  appearance: none;\n", 492 | "  -webkit-appearance: none;\n", 493 | "  -moz-appearance: none;\n", 494 | "  cursor: pointer;\n", 495 | "  transition: all 250ms ease-in-out;\n", 496 | "  outline: none;\n", 497 | "  background-color: #f2f3f3;\n", 498 | "}\n", 499 | ".toggle-btn .circle {\n", 500 | "  position: absolute;\n", 501 | "  width: 45%;\n", 502 | "  height: 150%;\n", 503 | "  top: 50%;\n", 504 | "  left: -5%;\n", 505 | "  transform: translateY(-50%);\n", 506 | "  background-color: #871f78;\n", 507 | "  transition: all 250ms ease-in-out;\n", 508 | "  pointer-events: none;\n", 509 | "  border-radius: 100vmax;\n", 510 | "  box-shadow: 0 2px 5px #696969;\n", 511 | "}\n", 512 | ".toggle-btn .circle::before {\n", 513 | '  content: "";\n', 514 | "  position: absolute;\n", 515 | "  top: 50%;\n", 516 | "  left: 50%;\n", 517 | "  transform: translate(-50%, -50%);\n", 518 | "  border: 3px solid #f2f3f3;\n", 519 | "  transition: all 250ms ease-in-out;\n", 520 | "  border-radius: 100vmax;\n", 521 | "}\n", 522 | '.toggle-btn input[type="checkbox"]:checked {\n', 523 | "  background-color: #871f78;\n", 524 | "}\n", 525 | '.toggle-btn input[type="checkbox"]:checked ~ .circle {\n', 526 | "  background-color: #f2f3f3;\n", 527 | "  left: 60%;\n", 528 | "}\n", 529 | '.toggle-btn input[type="checkbox"]:checked ~ .circle::before {\n', 530 | "  width: 50%;\n", 531 | "  border: 5px solid #871f78;\n", 532 | "}\n", 533 | ], 534 | }, 535 | "toggle-btn-8": { 536 | html: [ 537 | '<label class="toggle-btn">\n', 538 | '  <input type="checkbox" />\n', 539 | '  <span class="circle"></span>\n', 540 | "</label>", 541 | ], 542 | 543 | css: [ 544 | "*,\n", 545 | "::before,\n", 546 | "::after{\n", 547 | "  margin:0;\n", 548 | "  padding:0;\n", 549 | "  box-sizing:border-box;\n", 550 | "}\n", 551 | ".toggle-btn {\n", 552 | "  width: 130px;\n", 553 | "  height: 40px;\n", 554 | "  position: relative;\n", 555 | "  display: inline-block;\n", 556 | "  cursor: pointer;\n", 557 | "}\n", 558 | '.toggle-btn input[type="checkbox"] {\n', 559 | "  position: absolute;\n", 560 | "  width: 50%;\n", 561 | "  height: 100%;\n", 562 | "  border-radius: 100vmax;\n", 563 | "  appearance: none;\n", 564 | "  -webkit-appearance: none;\n", 565 | "  -moz-appearance: none;\n", 566 | "  cursor: pointer;\n", 567 | "  transition: all 250ms ease-in-out;\n", 568 | "  outline: none;\n", 569 | "  background-color: transparent;\n", 570 | "  border: 3px solid #545454;\n", 571 | "}\n", 572 | '.toggle-btn input[type="checkbox"]::after {\n', 573 | '  content: "FF";\n', 574 | "  position: absolute;\n", 575 | "  top: 50%;\n", 576 | "  left: 110%;\n", 577 | "  transform: translateY(-50%);\n", 578 | "  font-size: 2.5rem;\n", 579 | "  font-weight: 900;\n", 580 | "  color: #545454;\n", 581 | "  transition: all 250ms ease-in-out;\n", 582 | "  pointer-events: none;\n", 583 | "}\n", 584 | ".toggle-btn .circle {\n", 585 | "  position: absolute;\n", 586 | "  width: 30px;\n", 587 | "  height: 30px;\n", 588 | "  top: 50%;\n", 589 | "  left: 5px;\n", 590 | "  transform: translateY(-50%);\n", 591 | "  background-color: #545454;\n", 592 | "  transition: all 250ms ease-in-out;\n", 593 | "  pointer-events: none;\n", 594 | "  border-radius: 100vmax;\n", 595 | "}\n", 596 | '.toggle-btn input[type="checkbox"]:checked {\n', 597 | "  border: 3px solid #ff5f01;\n", 598 | "}\n", 599 | '.toggle-btn input[type="checkbox"]:checked::after {\n', 600 | '  content: "N";\n', 601 | "  color: #ff5f01;\n", 602 | "}\n", 603 | '.toggle-btn input[type="checkbox"]:checked ~ .circle {\n', 604 | "   background-color: #ff5f01;\n", 605 | "   left: calc(50% - 36px);\n", 606 | "}\n", 607 | ], 608 | }, 609 | }; 610 | -------------------------------------------------------------------------------- /scripts/script.js: -------------------------------------------------------------------------------- 1 | /* ---- Variables ---- */ 2 | 3 | let codeBlock = document.getElementById("codeBlock"); 4 | let viewBtn = document.getElementsByClassName("view-btn"); 5 | let tabLinks = document.getElementsByClassName("tab-links"); 6 | let closeBtn = document.getElementById("close-btn"); 7 | let toggleCode = document.getElementById("toggleCode"); 8 | let copyBtn = document.querySelector(".copy-btn"); 9 | 10 | /* ------------------- */ 11 | 12 | for (let i = 0; i < viewBtn.length; i++) { 13 | viewBtn[i].addEventListener("click", openCodeBlock); 14 | } 15 | 16 | for (let i = 0; i < tabLinks.length; i++) { 17 | tabLinks[i].addEventListener("click", openTab); 18 | } 19 | 20 | closeBtn.addEventListener("click", closeCodeBlock); 21 | 22 | copyBtn.addEventListener("click", copyCodeBlock); 23 | 24 | /* ---- functions ------- */ 25 | 26 | // function to hide underneath elements for modal to display correctly 27 | 28 | function showBehindElements() { 29 | let footer = document.getElementById("pageFooter"); 30 | let toggleArray = document.getElementsByClassName("toggle-container"); 31 | 32 | for (let i = 0; i < toggleArray.length; i++) { 33 | toggleArray[i].classList.remove("hide"); 34 | } 35 | 36 | footer.classList.remove("hide"); 37 | } 38 | 39 | // function to hide underneath elements for modal to display correctly 40 | 41 | function hideBehindElements(currentToggleCount) { 42 | let footer = document.getElementById("pageFooter"); 43 | let toggleArray = document.getElementsByClassName("toggle-container"); 44 | 45 | for (let i = 0; i < toggleArray.length; i++) { 46 | let toggleCount = toggleArray[i].getAttribute("toggle-count"); 47 | 48 | if (currentToggleCount !== toggleCount) { 49 | toggleArray[i].classList.add("hide"); 50 | } 51 | } 52 | 53 | footer.classList.add("hide"); 54 | } 55 | 56 | // funtion to open the code container 57 | let toggleContainer; 58 | let toggleName; 59 | function openCodeBlock(event) { 60 | toggleContainer = event.target.offsetParent; 61 | let toggleCount = toggleContainer.getAttribute("toggle-count"); 62 | 63 | codeBlock.classList.add("open"); 64 | toggleContainer.classList.add("show"); 65 | toggleName = toggleContainer.getAttribute("data-toggle-name"); 66 | 67 | hideBehindElements(toggleCount); 68 | showCode("html", toggleName); 69 | resetTab(); 70 | } 71 | 72 | // funtion to reset tabs 73 | function resetTab() { 74 | previousTab = document.querySelector(".html-code"); 75 | 76 | previousTab.classList.add("active"); 77 | document.querySelector(".css-code").classList.remove("active"); 78 | } 79 | 80 | // funtion to close the code container 81 | function closeCodeBlock(event) { 82 | codeBlock.classList.remove("open"); 83 | toggleContainer.classList.remove("show"); 84 | 85 | showBehindElements(); 86 | } 87 | 88 | // function to select tab 89 | let previousTab = codeBlock.querySelector(".active"); 90 | let currentTab; 91 | 92 | function openTab(event) { 93 | currentTab = event.target; 94 | 95 | if (previousTab != currentTab) { 96 | currentTab.classList.add("active"); 97 | previousTab.classList.remove("active"); 98 | previousTab = currentTab; 99 | } 100 | 101 | let codeType = currentTab.getAttribute("data-code"); 102 | showCode(codeType, toggleName); 103 | } 104 | 105 | // function to display code 106 | function showCode(codeType, toggleName) { 107 | toggleCode.innerHTML = ""; 108 | for (let i = 0; i < data[toggleName][codeType].length; i++) { 109 | let codeLine = document.createElement("pre"); 110 | codeLine.innerHTML += data[toggleName][codeType][i]; 111 | toggleCode.append(codeLine); 112 | } 113 | } 114 | 115 | // function to copy code 116 | 117 | const copyToClipboard = (str) => { 118 | if (navigator && navigator.clipboard && navigator.clipboard.writeText) { 119 | return navigator.clipboard.writeText(str); 120 | } 121 | 122 | return Promise.reject("The Clipboard API is not available."); 123 | }; 124 | 125 | function copyCodeBlock() { 126 | if (copyToClipboard(toggleCode.textContent)) { 127 | alert("code copied successfully!"); 128 | } 129 | } 130 | --------------------------------------------------------------------------------