{"html":"

\n \n \n \n

Download

\n \n

\n","css":".download-button {\n position: relative;\n width: 200px;\n height: 60px;\n border: 2px solid #282828;\n border-radius: 5px;\n background-color: #212121;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n box-shadow:\n 0 4px 8px rgba(0, 0, 0, 0.5),\n /* Outer shadow */ inset 0 1px 3px rgba(255, 255, 255, 0.3); /* Inner shadow */\n cursor: pointer;\n font-size: 16px;\n font-weight: bold;\n text-align: center;\n transition:\n background-color 0.3s,\n color 0.3s,\n transform 0.2s;\n}\n\n.download-button::before {\n content: \"\";\n position: absolute;\n top: -100%;\n left: 0;\n right: 0;\n bottom: 100%;\n border-radius: 5px;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.2) 0%,\n rgba(255, 255, 255, 0.1) 100%\n );\n z-index: 1;\n transition:\n top 0.5s ease-in-out,\n bottom 0.5s ease-in-out;\n}\n\n.download-button:hover::before {\n top: 0;\n bottom: 0;\n}\n\n.download-button:hover {\n background-color: #465243; /* Highlight color on hover */\n color: #fff;\n transform: translateY(-5px); /* Slight lift effect */\n}\n\n.download-button .icon {\n position: absolute;\n left: 20px;\n}\n\n.download-button .icon svg {\n width: 24px;\n height: 24px;\n}\n\n.download-button .label {\n position: relative;\n z-index: 10;\n}\n\n.download-button .loading {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 5px;\n background-image: linear-gradient(\n -225deg,\n #ff7402 0%,\n #ffe700 50%,\n #fff55e 100%\n );\n filter: blur(20px);\n z-index: -1;\n animation: animate 0.8s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n"}

old-cobra-46

👁 实时预览

📝 源代码