{"html":"

\n","css":".mybtn-container {\n --sz: clamp(16px, 22px, 24px);\n --rotate-hour: 0;\n\n display: flex;\n justify-content: center;\n align-items: center;\n height: 500px; /* no vh */\n width: 500px; /* no vw */\n\n position: relative;\n background: #1e1e1e;\n font-family: sans-serif;\n overflow: hidden;\n}\n\n/* Localized noise overlay */\n.mybtn-container::after {\n content: \"\";\n z-index: 100;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n background: radial-gradient(circle at 50% 50%, #000, #0000),\n url(\"data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n filter: contrast(100%) brightness(200%) invert(1) grayscale(1) opacity(0.1);\n mix-blend-mode: screen;\n}\n\n/* BUTTON */\n.mybtn-button {\n display: block;\n width: fit-content;\n height: fit-content;\n position: relative;\n margin: auto;\n background: linear-gradient(#ccc, #1e1e1e);\n box-shadow:\n inset 0 0 0.1em 0 #ccc,\n 0 0.3em 0.1em -0.2em #aaa,\n 0 0.3em 0 0 #333,\n 0 0.4em 0 0.1em #0004,\n -0.4em 0.4em 0.2em 0 #000a;\n border-radius: 0.2em;\n text-decoration: none;\n color: #1e1e1e;\n font-weight: 1000;\n text-shadow:\n 0 -2px 1px #0004,\n 0 2px 1px #fff4;\n padding: 0.4em 1em;\n transition: all 0.2s ease;\n cursor: pointer;\n --x: 0%;\n}\n\n.mybtn-button span {\n user-select: none;\n}\n\n.mybtn-button::before {\n content: \"\";\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 0;\n height: 100%;\n background: linear-gradient(\n 90deg,\n #fff0 0%,\n #fff4 30%,\n #fff6 40%,\n #fff0 100%\n );\n transform: skewX(-32deg);\n translate: 2em;\n transition: all 0.2s ease;\n}\n\n.mybtn-button:hover {\n translate: 0 0.3em;\n color: #fff;\n text-shadow: 0 0 5px #fff;\n box-shadow:\n inset 0 0 0.1em 0 #ccc,\n 0 0em 0.1em -0.2em #aaa,\n 0 0em 0 0 #333,\n 0 0.1em 0 0.1em #0004,\n -0.1em 0 0.2em 0 #000a;\n background: linear-gradient(\n -182deg,\n #fff 0%,\n #aaa 16%,\n #555 36%,\n #777 70%,\n #555 84%\n );\n}\n\n.mybtn-button:hover::before {\n width: 2em;\n transform: skewX(0deg);\n translate: -3em;\n opacity: 0;\n}\n\n.mybtn-button:hover .mybtn-shimmer {\n opacity: 1;\n}\n\n/* SHIMMER */\n.mybtn-shimmer {\n position: absolute;\n left: 0;\n right: 0;\n top: 12%;\n z-index: 3;\n margin: auto;\n transition:\n all 0.2s ease,\n translate 0.8s ease-out;\n --shimmer-size: 3em;\n --shimmer-clr: #fffde7;\n opacity: 0;\n pointer-events: none;\n translate: var(--x);\n}\n\n.mybtn-shimmer > div,\n.mybtn-shimmer > div::before {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n z-index: 100;\n}\n\n.mybtn-shimmer > div {\n --ani-speed: 8s;\n width: calc(2 * var(--shimmer-size));\n height: calc(2 * var(--shimmer-size));\n animation: flicker-spin var(--ani-speed) linear infinite;\n}\n\n.mybtn-shimmer > div:nth-child(2) {\n animation-delay: calc(-1 * var(--ani-speed) / 3);\n}\n.mybtn-shimmer > div:nth-child(3) {\n animation-delay: calc(-2 * var(--ani-speed) / 3);\n}\n\n.mybtn-shimmer > div::before {\n content: \"\";\n width: calc(var(--shimmer-size) / 4);\n height: calc(var(--shimmer-size) / 4);\n background: var(--shimmer-clr);\n filter: blur(4px);\n animation: flicker-spin calc(var(--ani-speed) / 2) linear reverse infinite;\n}\n\n/* KEYFRAMES */\n@keyframes flicker-spin {\n 0% {\n border-image: radial-gradient(var(--shimmer-clr) 69%, #0000 70%) 2%/45%;\n rotate: 0deg;\n }\n 50% {\n border-image: radial-gradient(var(--shimmer-clr) 69%, #0000 70%) 0%/42%;\n }\n 100% {\n border-image: radial-gradient(var(--shimmer-clr) 69%, #0000 70%) 2%/45%;\n rotate: 360deg;\n }\n}\n"}

pretty-cat-98

👁 实时预览

📝 源代码