{"html":"

\n \n \n \n Aggressive Design\n \n \n \n \n Boring Design\n \n

\n","css":".brutal-radio-group {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n font-family: \"Space Grotesk\", sans-serif;\n}\n\n.brutal-radio-label {\n display: flex;\n align-items: center;\n gap: 1rem;\n font-size: 1.25rem;\n font-weight: 800;\n cursor: pointer;\n color: #000;\n}\n\n.brutal-radio {\n display: none;\n}\n\n.brutal-radio-custom {\n width: 2rem;\n height: 2rem;\n background-color: #fff;\n border: 4px solid #000;\n border-radius: 50%;\n box-shadow: 4px 4px 0px 0px #000;\n transition: all 0.2s ease;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n\n.brutal-radio-label:hover .brutal-radio-custom {\n transform: translate(-2px, -2px);\n box-shadow: 6px 6px 0px 0px #000;\n}\n\n.brutal-radio:checked + .brutal-radio-custom {\n background-color: #ff90e8;\n}\n\n.brutal-radio:checked + .brutal-radio-custom::after {\n content: \"\";\n width: 1rem;\n height: 1rem;\n background-color: #000;\n border-radius: 50%;\n}\n\n.brutal-radio:active + .brutal-radio-custom {\n transform: translate(2px, 2px);\n box-shadow: 2px 2px 0px 0px #000;\n}\n"}

thin-mole-90

👁 实时预览

📝 源代码