{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n

\n","css":".radio-inputs {\n display: flex;\n justify-content: center;\n align-items: center;\n max-width: 350px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.radio-inputs > * {\n margin: 6px;\n}\n\n.instagram:checked + .radio-tile {\n border-color: #cc39a4;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n color: #cc39a4;\n}\n\n.instagram:checked + .radio-tile:before {\n transform: scale(1);\n opacity: 1;\n background-color: #cc39a4;\n border-color: #cc39a4;\n}\n\n.instagram:checked + .radio-tile .radio-icon svg {\n fill: #fff;\n}\n\n.instagram:checked + .radio-tile .radio-label {\n color: #cc39a4;\n}\n\n.instagram:focus + .radio-tile {\n background-color: #cc39a4;\n border-color: #fff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;\n}\n.instagram:checked + .radio-tile {\n background-color: #cc39a4;\n border-color: #fff;\n}\n\n.instagram:focus + .radio-tile:before {\n transform: scale(1);\n opacity: 1;\n}\n\n/* Twitter */\n.twitter:checked + .radio-tile {\n border-color: #03a9f4;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n color: #03a9f4;\n}\n\n.twitter:checked + .radio-tile:before {\n transform: scale(1);\n opacity: 1;\n background-color: #03a9f4;\n border-color: #03a9f4;\n}\n\n.twitter:checked + .radio-tile .radio-icon svg {\n fill: #fff;\n}\n\n.twitter:checked + .radio-tile .radio-label {\n color: #03a9f4;\n}\n\n.twitter:focus + .radio-tile {\n background-color: #03a9f4;\n border-color: #fff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;\n}\n.twitter:checked + .radio-tile {\n background-color: #03a9f4;\n border-color: #fff;\n}\n\n.twitter:focus + .radio-tile:before {\n transform: scale(1);\n opacity: 1;\n}\n/* discord */\n.discord:checked + .radio-tile {\n border-color: #8c9eff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n color: #8c9eff;\n}\n\n.discord:checked + .radio-tile:before {\n transform: scale(1);\n opacity: 1;\n background-color: #8c9eff;\n border-color: #8c9eff;\n}\n\n.discord:checked + .radio-tile .radio-icon svg {\n fill: #fff;\n}\n\n.discord:checked + .radio-tile .radio-label {\n color: #8c9eff;\n}\n\n.discord:focus + .radio-tile {\n background-color: #8c9eff;\n border-color: #fff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;\n}\n.discord:checked + .radio-tile {\n background-color: #8c9eff;\n border-color: #fff;\n}\n\n.discord:focus + .radio-tile:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.radio-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 80px;\n min-height: 80px;\n border-radius: 0.5rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n transition: 0.15s ease;\n cursor: pointer;\n position: relative;\n}\n\n.instagram:hover {\n border-color: #cc39a4;\n}\n.twitter:hover {\n border-color: #03a9f4;\n}\n.discord:hover {\n border-color: #8c9eff;\n}\n\n.radio-tile:hover:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.radio-icon svg {\n width: 2rem;\n height: 2rem;\n}\n.instagram {\n fill: #cc39a4;\n}\n.twitter {\n fill: #03a9f4;\n}\n.discord {\n fill: #8c9eff;\n}\n\n.radio-label {\n color: #707070;\n transition: 0.375s ease;\n text-align: center;\n font-size: 13px;\n}\n\n.radio-input {\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n"}

nasty-lizard-71

👁 实时预览

📝 源代码