{"html":"\n\n

\n\n","css":".button {\n position: relative;\n cursor: pointer;\n border: none;\n width: 80px;\n height: 40px;\n background: #111;\n color: #fff;\n}\n\n.text {\n position: relative;\n z-index: 1;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n background: radial-gradient(\n circle at 50% 50%,\n #0000 0,\n #0000 20%,\n #111111aa 50%\n ),\n radial-gradient(ellipse 100% 100%, #fff, #fff0);\n background-size:\n 3px 3px,\n auto auto;\n transition: 0.3s;\n}\n\n.button:hover::before {\n opacity: 0.3;\n}\n\n.a {\n pointer-events: none;\n position: absolute;\n --w: 2px;\n --t: -40px;\n --s: calc(var(--t) * -1);\n --e: calc(100% + var(--t));\n --g: #fff0, #fff3 var(--s), #fffa var(--s), #fff, #fffa var(--e),\n #fff3 var(--e), #fff0;\n}\n\n.a::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: inherit;\n filter: blur(4px) url(#unopaq);\n z-index: -2;\n}\n\n.a::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: inherit;\n filter: blur(10px) url(#unopaq);\n opacity: 0;\n z-index: -2;\n transition: 0.3s;\n}\n\n.button:hover .a::after {\n opacity: 1;\n}\n\n.l {\n left: -2px;\n}\n\n.r {\n right: -2px;\n}\n\n.l,\n.r {\n background: linear-gradient(var(--g));\n top: var(--t);\n bottom: var(--t);\n width: var(--w);\n}\n\n.t {\n top: -2px;\n}\n\n.b {\n bottom: -2px;\n}\n\n.t,\n.b {\n background: linear-gradient(90deg, var(--g));\n left: var(--t);\n right: var(--t);\n height: var(--w);\n}\n\n.backdrop {\n position: absolute;\n inset: -9900%;\n background: radial-gradient(\n circle at 50% 50%,\n #0000 0,\n #0000 20%,\n #111111aa 50%\n );\n background-size: 3px 3px;\n z-index: -1;\n}\n"}

evil-seahorse-60

👁 实时预览

📝 源代码