{"html":"\n

\n\n

\n START\n

\n\n \n

OFF

\n \n

\n","css":"/* Note : I updated the design from (reviews..). now the design is vertical but you can make it horizently as I also love horizental this UI but somehow I ended up with vertical. Thanks! */\n\n/* this hides the checkbox */\n.toggle-input {\n display: none;\n}\n/* main device body */\n.device {\n width: 120px;\n height: 250px;\n background: linear-gradient(145deg, #d8d3d3, #b6b1b1);\n border-radius: 90px;\n position: relative;\n box-shadow:\n 10px 10px 25px rgba(0, 0, 0, 0.15),\n -10px -10px 25px rgba(255, 255, 255, 0.05),\n inset 2px 2px 6px rgba(255, 255, 255, 0.6),\n inset -2px -2px 6px rgba(0, 0, 0, 0.05);\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 30px;\n}\n\n.device::before {\n content: \"Click Big Pad to Turn On\";\n position: absolute;\n top: 22%;\n transform: translateX(-50%) rotate(180deg);\n right: -30px;\n font-size: 10px;\n color: #888;\n opacity: 0.7;\n writing-mode: vertical-rl;\n letter-spacing: 1px;\n}\n/* two left bumpers */\n.bumper {\n position: absolute;\n left: -6px;\n width: 9px;\n height: 30px;\n background: linear-gradient(145deg, #9a9595, #7a7676);\n border-top-left-radius: 3px;\n border-bottom-left-radius: 3px;\n z-index: -1;\n box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.2);\n}\n\n.top-bumper {\n top: 70px;\n}\n.bot-bumper {\n top: 150px;\n}\n/* top controls btns */\n.d-pad-top {\n position: relative;\n width: 112px;\n height: 112px;\n margin-bottom: 20px;\n top: 5px;\n}\n\n.btn {\n position: absolute;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: linear-gradient(145deg, #e3dfdf, #bfbcbc);\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow:\n 3px 3px 6px rgba(0, 0, 0, 0.1),\n -3px -3px 6px rgba(255, 255, 255, 0.7);\n transition: all 0.2s ease-in-out;\n cursor: pointer;\n}\n\n.btn:hover {\n transform: scale(1.05);\n}\n.btn-top:hover {\n transform: translateX(-50%) scale(1.05);\n}\n.btn-bottom:hover {\n transform: translateX(-50%) scale(1.05);\n}\n.btn-left:hover {\n transform: translateY(-50%) scale(1.05);\n}\n.btn-right:hover {\n transform: translateY(-50%) scale(1.05);\n}\n\n.btn:active {\n box-shadow:\n inset 2px 2px 4px rgba(0, 0, 0, 0.15),\n inset -2px -2px 4px rgba(255, 255, 255, 0.7);\n}\n\n.btn-top {\n top: -20px;\n left: 50%;\n transform: translateX(-50%);\n}\n.btn-bottom {\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n}\n.btn-left {\n top: 60%;\n left: 10px;\n transform: translateY(-50%);\n}\n.btn-right {\n top: 60%;\n right: 10px;\n transform: translateY(-50%);\n}\n/* icons for all btns */\n.icon-power {\n width: 14px;\n height: 14px;\n border: 2px solid #ff4d4d;\n border-radius: 50%;\n border-top-color: transparent;\n position: relative;\n transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.icon-power::after {\n content: \"\";\n position: absolute;\n top: -3px;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 8px;\n background: #ff4d4d;\n}\n\n.icon-arrow {\n width: 9px;\n height: 9px;\n border-bottom: 2px solid #ffcc00;\n border-left: 2px solid #ffcc00;\n transform: rotate(45deg);\n margin-left: 3px;\n transition: 0.4s;\n}\n\n.icon-trident {\n position: relative;\n width: 14px;\n height: 12px;\n transition: 0.4s;\n}\n.icon-trident.green {\n color: #00e676;\n}\n.icon-trident.gray {\n color: #888;\n transform: scale(0.9);\n}\n.icon-trident::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n width: 100%;\n height: 2px;\n background: currentColor;\n}\n.icon-trident::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 6px;\n height: 100%;\n border: 2px solid currentColor;\n border-right: none;\n border-radius: 4px 0 0 4px;\n}\n\n.icon-bars {\n display: flex;\n gap: 3px;\n height: 10px;\n transition: 0.4s;\n}\n.icon-bars::before,\n.icon-bars::after {\n content: \"\";\n width: 2px;\n height: 100%;\n background: #2979ff;\n border-radius: 1px;\n}\n/* mid sites controls */\n.mid-controls {\n display: flex;\n width: 100%;\n justify-content: space-between;\n padding: 0 15px;\n align-items: center;\n position: relative;\n top: 10px;\n}\n\n.bt-btn {\n width: 12px;\n height: 12px;\n background: #00b0ff;\n border-radius: 50%;\n transition: 0.4s;\n margin-bottom: 5px;\n box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.4);\n}\n\n.start-label {\n font-size: 6px;\n font-weight: bold;\n color: #555;\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n letter-spacing: 1px;\n}\n\n.start-btn {\n width: 5px;\n height: 20px;\n position: relative;\n left: 2px;\n background: linear-gradient(to bottom, #777, #555);\n border-radius: 3px;\n transition: 0.3s;\n box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n}\n/* big checkbox btns shape */\n.big-pad {\n width: 92px;\n height: 262px;\n border-radius: 50%;\n background: linear-gradient(145deg, #e6e0e0, #c2bcbc);\n margin-top: 22px;\n position: relative;\n bottom: 10px;\n border: 1px solid #d1cdcd;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow:\n 5px 5px 15px rgba(0, 0, 0, 0.1),\n -5px -5px 15px rgba(255, 255, 255, 0.6),\n inset 2px 2px 5px rgba(255, 255, 255, 0.8);\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n user-select: none;\n}\n\n.status-text {\n font-weight: 800;\n font-size: 14px;\n color: #9d9696;\n letter-spacing: 1.5px;\n transition: 0.4s;\n}\n.big-pad:active {\n transform: scale(0.96);\n box-shadow:\n 2px 2px 5px rgba(0, 0, 0, 0.1),\n inset 4px 4px 10px rgba(0, 0, 0, 0.15),\n inset -4px -4px 10px rgba(255, 255, 255, 0.5);\n}\n/* notches... */\n.notch {\n position: absolute;\n background: #a8a3a3;\n border-radius: 1.5px;\n}\n.n-top {\n top: 12px;\n left: 50%;\n transform: translateX(-50%);\n width: 3px;\n height: 8px;\n}\n.n-bottom {\n bottom: 12px;\n left: 50%;\n transform: translateX(-50%);\n width: 3px;\n height: 8px;\n}\n.n-left {\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 3px;\n}\n.n-right {\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 3px;\n}\n\n/* logic start from here */\n/* this changes text on btn */\n.toggle-input:checked + .device .status-text {\n color: #00e676;\n text-shadow:\n 0 0 10px rgba(0, 230, 118, 0.6),\n 0 0 20px rgba(0, 230, 118, 0.4);\n}\n\n.toggle-input:checked + .device .status-text::after {\n content: \"ON\";\n}\n.toggle-input:not(:checked) + .device .status-text::after {\n content: \"OFF\";\n}\n\n.status-text {\n font-size: 0;\n}\n.status-text::after {\n font-size: 14px;\n}\n\n.toggle-input:checked + .device .icon-power {\n filter: drop-shadow(0 0 6px #ff4d4d) drop-shadow(0 0 12px #ff4d4d);\n}\n\n.toggle-input:checked + .device .icon-arrow {\n filter: drop-shadow(0 0 6px #ffcc00) drop-shadow(0 0 12px #ffcc00);\n}\n\n.toggle-input:checked + .device .icon-trident.green {\n filter: drop-shadow(0 0 6px #00e676) drop-shadow(0 0 12px #00e676);\n}\n\n.toggle-input:checked + .device .icon-bars {\n filter: drop-shadow(0 0 6px #2979ff) drop-shadow(0 0 12px #2979ff);\n}\n\n/* extra glows */\n.toggle-input:checked + .device .bt-btn {\n background: #00e5ff;\n filter: drop-shadow(0 0 6px #00e5ff) drop-shadow(0 0 12px #00b0ff);\n}\n\n.toggle-input:checked + .device .start-btn {\n background: #222;\n box-shadow: inset 0 0 5px #000;\n}\n\n/*animation */\n@keyframes pulse-off {\n 0% {\n opacity: 0.5;\n text-shadow: 0 0 0px rgba(157, 150, 150, 0);\n }\n 50% {\n opacity: 1;\n text-shadow: 0 0 8px rgba(157, 150, 150, 0.6);\n }\n 100% {\n opacity: 0.5;\n text-shadow: 0 0 0px rgba(157, 150, 150, 0);\n }\n}\n.toggle-input:not(:checked) + .device .status-text {\n animation: pulse-off 2s infinite ease-in-out;\n}\n"}

smooth-bird-47

👁 实时预览

📝 源代码