{"html":"

\n \n

\n","css":".styled-wrapper .button {\n display: block;\n position: relative;\n width: 76px;\n height: 76px;\n margin: 0;\n overflow: hidden;\n outline: none;\n background-color: transparent;\n cursor: pointer;\n border: 0;\n}\n\n.styled-wrapper .button:before {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n inset: 7px;\n border: 3px solid black; /* Update dynamically for light/dark mode */\n transition:\n opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\n transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\n}\n\n.styled-wrapper .button:after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n inset: 7px;\n border: 4px solid #599a53;\n transform: scale(1.3);\n transition:\n opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\n transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 0;\n}\n\n.styled-wrapper .button:hover:before,\n.styled-wrapper .button:focus:before {\n opacity: 0;\n transform: scale(0.7);\n transition:\n opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),\n transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.styled-wrapper .button:hover:after,\n.styled-wrapper .button:focus:after {\n opacity: 1;\n transform: scale(1);\n transition:\n opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,\n transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;\n}\n\n.styled-wrapper .button-box {\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.styled-wrapper .button-elem {\n display: block;\n width: 30px;\n height: 30px;\n margin: 24px 18px 0 22px;\n transform: rotate(360deg);\n fill: #f0eeef;\n}\n\n.styled-wrapper .button:hover .button-box,\n.styled-wrapper .button:focus .button-box {\n transition: 0.4s;\n transform: translateX(-69px);\n}\n"}

clever-crab-26

👁 实时预览

📝 源代码