{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":229,"projects":[{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"1fc4bf","snapshot":null,"tags":null,"title":"switch by Ali-Tahmazi99","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":140,"jsLen":0,"cssLen":1050,"pureCSS":1,"html":"\n\n \n \n\n \n","css":"input[type = \"checkbox\"] {\n visibility: hidden;\n display: none;\n appearance: none;\n -webkit-appearance: none;\n}\n\nlabel.container {\n display: block;\n width: 60px;\n height: 30px;\n background: #d3d3d3;\n border-radius: 50px;\n position: relative;\n cursor: pointer;\n box-shadow: 9px 9px 29px #969696,\n -9px -9px 29px #ffffff;\n}\n\nlabel.shadow {\n width: 50px;\n height: 20px;\n position: absolute;\n border-radius: 50px;\n left: 5px;\n top: 5px;\n box-shadow: inset 3px 3px 10px #969696,\n inset -3px -3px 5px #ffffffbd;\n cursor: pointer;\n}\n\n.container span {\n display: inline-block;\n width: 20px;\n height: 20px;\n background-color: #ffaa00;\n margin: 5px;\n border-radius: 50px;\n font-size: 20px;\n transition: all 0.3s ease-in;\n position: relative;\n left: 0;\n z-index: 1;\n}\n\n.container span::after {\n position: absolute;\n top: 6px;\n left: 4px;\n transition-delay: 5s;\n}\n\ninput[type = \"checkbox\"]:checked ~ span {\n left: 29px;\n transition: 0.3s ease-in;\n background: #0a100d;\n transform: rotate(220deg);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"212137","snapshot":null,"tags":null,"title":"switch by elijahgummer","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":129,"jsLen":0,"cssLen":2168,"pureCSS":1,"html":"

\n \n \n

\n","css":".checkbox {\n --blue: #0d7eff;\n --g08: #e1e5eb;\n --g04: #848ea1;\n text-align: center;\n}\n\n.checkbox .tgl {\n display: none;\n}\n.checkbox .tgl,\n.checkbox .tgl:after,\n.checkbox .tgl:before,\n.checkbox .tgl *,\n.checkbox .tgl *:after,\n.checkbox .tgl *:before,\n.checkbox .tgl + .tgl-btn {\n box-sizing: border-box;\n}\n.checkbox .tgl::selection,\n.checkbox .tgl:after::selection,\n.checkbox .tgl:before::selection,\n.checkbox .tgl *::selection,\n.checkbox .tgl *:after::selection,\n.checkbox .tgl *:before::selection,\n.checkbox .tgl + .tgl-btn::selection {\n background: none;\n}\n.checkbox .tgl + .tgl-btn {\n outline: 0;\n display: block;\n width: 57px;\n height: 27px;\n position: relative;\n cursor: pointer;\n user-select: none;\n font-size: 12px;\n font-weight: 400;\n color: #fff;\n}\n.checkbox .tgl + .tgl-btn:after,\n.checkbox .tgl + .tgl-btn:before {\n position: relative;\n display: block;\n content: \"\";\n width: 44%;\n height: 100%;\n}\n.checkbox .tgl + .tgl-btn:after {\n left: 0;\n}\n.checkbox .tgl + .tgl-btn:before {\n display: inline;\n position: absolute;\n top: 7px;\n}\n.checkbox .tgl:checked + .tgl-btn:after {\n left: 56.5%;\n}\n\n.checkbox .tgl + .tgl-btn {\n background: var(--g08);\n border-radius: 20rem;\n padding: 2px;\n transition: all 0.4s ease;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.checkbox .tgl + .tgl-btn:after {\n border-radius: 2em;\n background: #fff;\n transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),\n padding 0.3s ease, margin 0.3s ease;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n}\n.checkbox .tgl + .tgl-btn:before {\n content: \"No\";\n left: 28px;\n color: var(--g04);\n transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.checkbox .tgl + .tgl-btn:active {\n box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);\n}\n.checkbox .tgl + .tgl-btn:active:after {\n padding-right: 0.4em;\n}\n.checkbox .tgl:checked + .tgl-btn {\n background: var(--blue);\n}\n.checkbox .tgl:checked + .tgl-btn:active {\n box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);\n}\n.checkbox .tgl:checked + .tgl-btn:active:after {\n margin-left: -0.4em;\n}\n.checkbox .tgl:checked + .tgl-btn:before {\n content: \"Yes\";\n left: 4px;\n color: #fff;\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"371050","snapshot":null,"tags":null,"title":"switch by zebra76966","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":88,"jsLen":0,"cssLen":868,"pureCSS":1,"html":"\n \n \n","css":".switch {\n position: absolute;\n top: 50%;\n width: 30px;\n height: 60px;\n padding: 2px;\n left: 50%;\n transform: translate(-50%,-50%);\n}\n\n.switch input {\n opacity: 0;\n height: 0;\n width: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 20px;\n border: 1px solid rgba(0,0,0,0.2);\n border-style: outset;\n background-color: white;\n transition: 0.4s;\n}\n\n.slider::before {\n content: \"🌞\";\n font-size: 22px;\n line-height: 15px;\n border-radius: 100%;\n position: absolute;\n left: -0.8px;\n top: 8px;\n background-color: transparent;\n transition: 0.4s;\n}\n\n.switch > input:checked + .slider {\n background-color: #000429;\n}\n\n.switch > input:checked + .slider:before {\n content: \"🌑\";\n font-size: 22px;\n line-height: 25px;\n background-color: transparent;\n transform: translateY(24px);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"37deac","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":824,"jsLen":0,"cssLen":1606,"pureCSS":1,"html":"

\n \n

\n","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 50px;\n padding: 10px;\n background-image: linear-gradient(to bottom, #f0f0f0, #e8e8e8);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n font-size: 1.5em;\n}\n\n.toggle-checkbox {\n appearance: none;\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n font: inherit;\n opacity: 0;\n cursor: pointer;\n}\n\n.toggle-container {\n display: flex;\n align-items: center;\n position: relative;\n border-radius: 50px;\n width: 80px;\n height: 40px;\n background-color: #e8e8e8;\n box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: background-color 0.4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: #f3b519;\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: 2px;\n border-radius: 50%;\n width: 36px;\n height: 36px;\n background-color: #e8e8e8;\n box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.1), inset 0 -4px 2px rgba(0, 0, 0, 0.2), inset 0 6px 2px rgba(255, 255, 255, 0.3), 0 4px 4px rgba(0, 0, 0, 0.5);\n transition: left 0.4s;\n}\n\n.toggle-checkbox:checked + .toggle-container > .toggle-button {\n left: 42px;\n}\n\n.toggle-button-circles-container {\n display: grid;\n grid-template-columns: repeat(3, 4px);\n gap: 2px;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: 2px;\n height: 2px;\n background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"4bf41a","snapshot":null,"tags":null,"title":"switch by nhfiz","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":284,"jsLen":0,"cssLen":1284,"pureCSS":1,"html":"

\n\t\n\tON\n\t\n\tOFF\n\t\n\tAUTO\n

","css":"/* Multiple Toggle Switch by Abu Shafiyya */\n\nfieldset {\n border: 0;\n}\n\n/* Hide default radio */\n.radio input[type=\"radio\"] {\n position: absolute;\n visibility: hidden;\n display: none;\n opacity: 0;\n z-index: -1;\n}\n\n/* Customizing label */\n.radio label {\n position: relative;\n padding: 10px 20px 10px 25px;\n cursor: pointer;\n border-radius: 20px;\n color: #2196F3;\n margin: 0px 5px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.radio label, .radio label::before {\n -webkit-transition: .25s all ease;\n transition: .25s all ease;\n}\n\n.radio label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \" \";\n position: absolute;\n top: 30%;\n left: 0;\n width: 1em;\n height: 1em;\n border: 2px solid #2196F3;\n}\n\n.radio input[type=\"radio\"] + label::before {\n border-radius: 1em;\n}\n\n\n/* Checked toggle */\n.radio input[type=\"radio\"]:checked + label {\n color: #fff;\n background: #2196F3;\n z-index: 1;\n}\n\n.radio input[type=\"radio\"]:checked + label {\n padding: 10px 20px 10px 20px;\n}\n\n.radio input[type=\"radio\"]:checked + label::before {\n top: 4px;\n width: 100%;\n height: 2em;\n z-index: -1;\n}\n\n.radio:hover input[type=\"radio\"]:checked + label {\n -webkit-box-shadow: #2195f338 0px 0px 0px 25px;\n box-shadow: #2195f338 0px 0px 0px 25px;\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"4ccd54","snapshot":null,"tags":null,"title":"switch by faxriddin20","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":826,"jsLen":0,"cssLen":1778,"pureCSS":1,"html":"

\n \n

\n","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 0.5em;\n padding: 0.125em;\n background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);\n box-shadow: 0 1px 1px rgb(255 255 255 / 0.6);\n /* resize for demo */\n font-size: 1.5em;\n}\n\n.toggle-checkbox {\n appearance: none;\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n /* fix em sizing */\n font: inherit;\n opacity: 0;\n cursor: pointer;\n}\n\n.toggle-container {\n display: flex;\n align-items: center;\n position: relative;\n border-radius: 0.375em;\n width: 3em;\n height: 1.5em;\n background-color: #e8e8e8;\n box-shadow: inset 0 0 0.0625em 0.125em rgb(255 255 255 / 0.2),\n inset 0 0.0625em 0.125em rgb(0 0 0 / 0.4);\n transition: background-color 0.4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: lime;\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: 0.0625em;\n border-radius: 0.3125em;\n width: 1.375em;\n height: 1.375em;\n background-color: #e8e8e8;\n box-shadow: inset 0 -0.0625em 0.0625em 0.125em rgb(0 0 0 / 0.1),\n inset 0 -0.125em 0.0625em rgb(0 0 0 / 0.2),\n inset 0 0.1875em 0.0625em rgb(255 255 255 / 0.3),\n 0 0.125em 0.125em rgb(0 0 0 / 0.5);\n transition: left 0.4s;\n}\n\n.toggle-checkbox:checked + .toggle-container > .toggle-button {\n left: 1.5625em;\n}\n\n.toggle-button-circles-container {\n display: grid;\n grid-template-columns: repeat(3, min-content);\n gap: 0.125em;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: 0.125em;\n height: 0.125em;\n background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"51d60f","snapshot":null,"tags":null,"title":"switch by alfoly1988","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":91,"jsLen":0,"cssLen":864,"pureCSS":1,"html":"\n \n \n\n","css":"/* 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 top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgb(75, 73, 74);\n transition: 0.4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: black;\n box-shadow: inset 8px -4px 0 0 white;\n transition: 0.4s;\n}\n\n.switch input:checked + .slider {\n background-color: #2196f3;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.5em);\n background-color: yellow;\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"91731b","snapshot":null,"tags":null,"title":"switch by PriyanshuGupta28","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":103,"jsLen":0,"cssLen":1178,"pureCSS":1,"html":"\n \n \n\n","css":".toggle {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n}\n\n.toggle input {\n opacity: 0;\n width: 0;\n height: 0;\n transition: transform 0.2s ease-in-out;\n}\n\n.slider {\n box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #FF3CAC;\n background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);\n transition: 0.2 ease-in-out;\n border-radius: 34px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n transition: transform 0.3s ease-in-out;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.input:checked + .slider {\n background-color: #8BC6EC;\n background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);\n}\n\n.input:checked + .slider:before {\n transform: translateX(26px);\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"c937bd","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":88,"jsLen":0,"cssLen":804,"pureCSS":1,"html":"\n \n \n","css":"/* 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 top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: #2196F3;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #2196F3;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"f5136d","snapshot":null,"tags":null,"title":"switch by TroyRandall","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":744,"jsLen":0,"cssLen":1397,"pureCSS":1,"html":"

\n \n\n 14\n

\n","css":"/* The switch - the box around the slider */\n.comment-react {\n margin: 0;\n display: flex;\n justify-content: center;\n padding: 5px;\n background-color: #f1f1f1;\n border-radius: 5px;\n scale: 1.5;\n width: 100px;\n}\n\n.comment-react button {\n width: 35px;\n height: 35px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: 0;\n outline: none;\n}\n\n.comment-react button:after {\n content: \"\";\n width: 40px;\n height: 40px;\n position: absolute;\n left: -3px;\n top: -3px;\n background-color: #f5356e;\n border-radius: 50%;\n z-index: 0;\n transform: scale(0);\n}\n\n.comment-react button svg {\n position: relative;\n z-index: 9;\n}\n\n.comment-react button:hover:after {\n animation: ripple 0.6s ease-in-out forwards;\n}\n\n.comment-react button:hover svg {\n fill: #f5356e;\n}\n\n.comment-react button:hover svg path {\n stroke: #f5356e;\n fill: #f5356e;\n}\n\n.comment-react hr {\n width: 80%;\n height: 1px;\n background-color: #dfe1e6;\n margin: auto;\n border: 0;\n}\n\n.comment-react span {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n font-size: 20px;\n font-weight: 600;\n color: #707277;\n padding-right: 10px;\n text-align: center;\n}\n\n@keyframes ripple {\n 0% {\n transform: scale(0);\n opacity: 0.6;\n }\n\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"fab444","snapshot":null,"tags":null,"title":"switch by JkHuger","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":69,"jsLen":0,"cssLen":2618,"pureCSS":1,"html":"\n","css":".ch, .ch:before, .ch:after {\n transition: all 0.3s ease-in-out;\n}\n\n.ch {\n background-color: rgb(27,123,145);\n border-radius: 0.2em;\n box-shadow: 0 0.05em 0 0.05em rgba(0,0,0,0.3) inset;\n font-size: 20px;\n overflow: hidden;\n position: relative;\n width: 3em;\n height: 1.5em;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n z-index: 0;\n}\n\n.ch:before, .ch:after {\n content: \"\";\n display: block;\n position: absolute;\n}\n\n.ch:before {\n background-color: currentColor;\n border-radius: 0.125em;\n box-shadow: 0 0 0 0.05em inset,\n\t\t-0.12em -0.12em 0 rgb(109,148,184) inset,\n\t\t-0.4em -0.3em 0 0.05em inset,\n\t\t0.12em 0.12em 0 rgb(255,255,255) inset;\n color: rgb(149,188,224);\n opacity: 0.9;\n bottom: 0;\n left: 0.125em;\n width: 1.25em;\n height: 1.25em;\n z-index: 2;\n}\n\n.ch:after {\n background-image: /* white */radial-gradient(0.2em 0.5em at 38% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\tradial-gradient(0.3em 0.8em at 52% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\tradial-gradient(0.25em 0.4em at 67% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\t/* yellow */\n\t\tradial-gradient(0.25em 0.7em at 36% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\tradial-gradient(0.4em 1.2em at 52% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\tradial-gradient(0.25em 0.6em at 70% 93%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\t/* orange */\n\t\tradial-gradient(0.3em 0.8em at 32% 81%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\tradial-gradient(0.5em 1.6em at 52% 95%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\tradial-gradient(0.3em 0.9em at 74% 86%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\t/* red-orange */\n\t\tradial-gradient(0.4em 1em at 25% 70%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),\n\t\tradial-gradient(0.7em 2.75em at 52% 100%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),\n\t\tradial-gradient(0.4em 1.2em at 79% 75%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%);\n background-position: 100% 1.5em;\n background-size: 1.5em 1.5em;\n background-repeat: no-repeat;\n border-radius: 0 0 0 0.1em / 0 0 0 0;\n box-shadow: 0 0 0 0 rgb(169,208,244) inset;\n bottom: 0;\n left: 0;\n width: 1.5em;\n height: 1.5em;\n z-index: 1;\n}\n/* Checked */\n.ch:checked {\n background-color: rgb(92,8,8);\n}\n\n.ch:checked:before {\n border-radius: 50%;\n transform: translate(1.5em,1.5em) rotate(45deg) scale(0.5);\n}\n\n.ch:checked:after {\n background-position: 100% 0;\n box-shadow: 0 -0.15em 0 0 rgb(169,208,244) inset;\n width: 3em;\n}\n\n/* Other States */\n.ch:focus {\n\t/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */\n outline: 0;\n}"},{"created":"2024-01-22T17:07:50.000Z","isPrivate":0,"projectId":"ac9d49","snapshot":null,"tags":null,"title":"switch by G4b413l","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":88,"jsLen":0,"cssLen":981,"pureCSS":1,"html":"\n \n \n","css":".switch input {\n display: none;\n}\n\n.switch {\n width: 60px;\n height: 30px;\n position: relative;\n}\n\n.slider {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 30px;\n box-shadow: 0 0 0 2px #777, 0 0 4px #777;\n cursor: pointer;\n border: 4px solid transparent;\n overflow: hidden;\n transition: 0.2s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background-color: #777;\n border-radius: 30px;\n transform: translateX(-30px);\n /*translateX(-(w-h))*/\n transition: 0.2s;\n}\n\ninput:checked + .slider:before {\n transform: translateX(30px);\n /*translateX(w-h)*/\n background-color: limeGreen;\n}\n\ninput:checked + .slider {\n box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;\n}\n\n.switch200 .slider:before {\n width: 200%;\n transform: translateX(-82px);\n /*translateX(-(w-h))*/\n}\n\n.switch200 input:checked + .slider:before {\n background-color: red;\n}\n\n.switch200 input:checked + .slider {\n box-shadow: 0 0 0 2px red, 0 0 8px red;\n}"}]}},"actionData":null,"errors":null}