{"html":"

Shop

\n \n \n","css":".codepen-button {\n font-family: monospace;\n font-weight: bolder;\n display: block;\n cursor: pointer;\n color: #000;\n margin: 0 auto;\n position: relative;\n text-decoration: none;\n font-weight: 600;\n border-radius: 6px;\n overflow: hidden;\n padding: 3px;\n width: 130px;\n isolation: isolate;\n transform: scale(0.85);\n}\n\n.codepen-button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 420%;\n height: 120%;\n background: linear-gradient(\n 115deg,\n #628fbc,\n hsl(0, 93%, 73%),\n #f032a7,\n #329af0,\n #f032a7\n );\n background-size: 25% 100%;\n animation: border-animation 0.75s linear infinite;\n animation-play-state: paused;\n translate: -5% 0%;\n transition: translate 0.25s ease-out;\n}\n\n.codepen-button:hover::before {\n animation-play-state: running;\n transition-duration: 0.75s;\n translate: 0% 0%;\n}\n\n@keyframes border-animation {\n to {\n transform: translateX(-25%);\n }\n}\n\n.codepen-button span {\n position: relative;\n display: block;\n padding: 1rem 1.5rem;\n font-size: 1.1rem;\n background: #fff;\n border-radius: 3px;\n height: 100%;\n}\n\n.codepen-button .span {\n display: flex;\n flex-direction: row;\n justify-content: start;\n align-items: center;\n gap: 10px;\n}\n\n.codepen-button .p {\n margin: 0;\n}\n"}

heavy-moose-44

👁 实时预览

📝 源代码