{"html":"

\n \n \n

\n \n

\n Petit\n \n

\n \n \n

\n \n

\n Grand\n \n

\n","css":".radio-input {\n display: flex;\n gap: 16px; /* Espace entre les lignes */\n}\n\n.radio-b {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.radio-b__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.radio-b__label {\n display: flex;\n align-items: center;\n gap: 12px; /* Espace entre le carré et le texte */\n font-size: 15px;\n color: #000000;\n font-weight: 600;\n transition: all 0.3s ease;\n}\n\n.radio-b__custom {\n position: relative;\n width: 26px;\n height: 26px;\n border: 2px solid #000000;\n border-radius: 0%;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.radio-b__custom-fill {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 10px;\n background: linear-gradient(\n 0deg,\n rgba(0, 230, 118, 1) 0%,\n rgba(255, 215, 0, 1) 100%\n );\n transform: translate(-50%, -50%);\n transition: all 0.3s ease;\n}\n\n.radio-b__input:checked + .radio-b__label .radio-b__custom-fill {\n width: 26px;\n height: 26px;\n transition: all 0.3s ease;\n}\n\n.radio-b__input:checked + .radio-b__label .radio-b__custom {\n border: none; /* Supprime les bordures noires */\n transition: all 0.3s ease; /* Assure une transition fluide */\n}\n\n.radio-b__input:hover + .radio-b__label .radio-b__custom {\n transform: scale(0.85);\n color: linear-gradient(\n 0deg,\n rgba(0, 230, 118, 1) 0%,\n rgba(255, 215, 0, 1) 100%\n );\n}\n\n/* Optionnel : style pour le texte */\n.radio-b__text {\n font-size: 15px;\n color: #000000;\n font-weight: 600;\n}\n"}

breezy-horse-22

👁 实时预览

📝 源代码