{"html":"\n","css":".aero-button {\n position: relative;\n cursor: pointer;\n border-radius: 4px;\n border: 1px solid #3d80b1;\n background: #d3ecfb;\n overflow: hidden;\n isolation: isolate;\n transition: 0.05s all;\n}\n\n.aero-button::before {\n content: \"\";\n position: absolute;\n inset: 0;\n top: 50%;\n background: linear-gradient(\n 90deg,\n #8bd2f6,\n #a7dbf7 30%,\n #a7dbf7 50%,\n #7bcaf4\n );\n z-index: -1;\n transition: inherit;\n}\n\n.aero-button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n box-shadow: inset 0px 0px 0px 1px #dcf1fc;\n z-index: 1;\n transition: inherit;\n}\n\n.inner {\n position: relative;\n display: flex;\n flex-direction: row;\n padding: 4px;\n transition: inherit;\n}\n\n.inner svg {\n height: 2.4em;\n margin: auto;\n transition: inherit;\n}\n\n.aero-button:hover {\n background: #f3feff;\n}\n\n.aero-button:hover::before {\n background: linear-gradient(\n 90deg,\n #7ae4ff,\n #b7fbfe 30%,\n #b7fbfe 50%,\n #7ae4ff\n );\n}\n\n.aero-button:active {\n border: 1px solid #1d415b;\n background: #a9d8f2;\n}\n\n.aero-button:active::before {\n background: linear-gradient(\n 90deg,\n #6abce8,\n #98d1f0 30%,\n #98d1f0 50%,\n #6abce8\n );\n translate: 1px 1px;\n}\n\n.aero-button:active::after {\n box-shadow:\n inset 2px 2px 4px -2px #0007,\n inset -2px 2px 4px -2px #0007;\n}\n\n.aero-button:active .inner {\n translate: 1px 1px;\n}\n"}

brave-fox-7

👁 实时预览

📝 源代码