{"html":"\n\n\n \n \n \n \n \n \n\n

\n MINECRAFT\n I LOVE MC\n CREEPERS\n

\n\n","css":".boton-minecraft {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n font-size: 20px;\n font-weight: bold;\n color: white;\n background-color: #228b22;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition:\n background 0.3s,\n transform 0.1s,\n color 0.3s;\n position: relative;\n overflow: hidden;\n}\n\n.boton-minecraft:hover {\n background-color: black;\n transform: scale(1.05);\n}\n\n.boton-minecraft svg {\n width: 32px;\n height: 32px;\n transition: transform 0.3s;\n}\n\n.boton-minecraft:hover svg {\n transform: scale(1.1);\n}\n\n.texto-boton {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 180px;\n height: 24px;\n overflow: hidden;\n}\n\n.texto-boton span {\n position: absolute;\n transition: opacity 0.3s ease-in-out;\n}\n\n.texto-boton span:first-child {\n opacity: 1;\n}\n\n.texto-boton span:nth-child(2),\n.texto-boton span:nth-child(3) {\n opacity: 0;\n}\n\n.boton-minecraft:hover .texto-boton span:first-child {\n opacity: 0;\n}\n\n.boton-minecraft:hover .texto-boton span:nth-child(2) {\n opacity: 1;\n}\n\n#toggle {\n display: none;\n}\n\n#toggle:checked + .boton-minecraft {\n background-color: white;\n color: black;\n}\n\n#toggle:checked + .boton-minecraft .texto-boton span:first-child,\n#toggle:checked + .boton-minecraft .texto-boton span:nth-child(2) {\n opacity: 0;\n}\n\n#toggle:checked + .boton-minecraft .texto-boton span:nth-child(3) {\n opacity: 1;\n}\n"}

young-wasp-37

👁 实时预览

📝 源代码