{"html":"\n \n \n \n \n \n \n \n YES, DELETE\n \n\n","css":".delete-button {\n position: relative;\n background: transparent;\n padding: 0;\n border: none;\n cursor: pointer;\n text-decoration: none;\n display: inline-block;\n touch-action: manipulation;\n outline-offset: 4px;\n box-sizing: border-box;\n margin: 10px;\n}\n\n.button-shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n background: rgba(0, 0, 0, 0.3);\n transform: translateY(4px);\n transition: transform 0.15s cubic-bezier(0.3, 0.7, 0.4, 1);\n z-index: 1;\n}\n\n.button-edge {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n background: linear-gradient(\n to left,\n #7f1d1d 0%,\n #991b1b 8%,\n #991b1b 92%,\n #7f1d1d 100%\n );\n z-index: 2;\n}\n\n.button-front {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n padding: 16px 32px;\n border-radius: 30px;\n font-family: \"Montserrat\", sans-serif;\n font-size: 18px;\n font-weight: 900;\n color: white;\n background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n text-transform: uppercase;\n letter-spacing: 1px;\n transform: translateY(-8px);\n transition:\n transform 0.1s cubic-bezier(0.3, 0.7, 0.4, 1),\n background 0.15s;\n border: 1px solid rgba(255, 255, 255, 0.2);\n z-index: 3;\n overflow: hidden;\n text-shadow:\n 0px -1px 1px rgba(0, 0, 0, 0.5),\n 0px 1px 1px rgba(255, 255, 255, 0.3);\n}\n\n.button-front::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.2),\n transparent\n );\n transition: 0.5s;\n}\n\n.delete-button:hover .button-front::after {\n left: 100%;\n}\n\n.delete-icon {\n width: 20px;\n height: 20px;\n margin-right: 12px;\n stroke: #ffffff;\n flex-shrink: 0;\n filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.5));\n}\n\n.delete-button:hover .button-front {\n transform: translateY(-6px);\n background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n}\n\n.delete-button:hover .button-shadow {\n transform: translateY(3px);\n}\n\n.delete-button:active .button-front {\n transform: translateY(0px);\n background: linear-gradient(135deg, #ff6666 0%, #dc2626 100%);\n transition: transform 34ms;\n}\n\n.delete-button:active .button-shadow {\n transform: translateY(0px);\n transition: transform 34ms;\n}\n\n@media (max-width: 600px) {\n .delete-button {\n display: inline-block;\n width: auto;\n margin: 5px;\n }\n\n .button-front {\n padding: 10px 20px;\n font-size: 12px;\n letter-spacing: 0.5px;\n transform: translateY(-5px);\n white-space: nowrap;\n }\n\n .delete-button:hover .button-front {\n transform: translateY(-3px);\n }\n\n .delete-button:active .button-front {\n transform: translateY(0px);\n background: linear-gradient(135deg, #ff6666 0%, #dc2626 100%);\n }\n\n .delete-icon {\n width: 14px;\n height: 14px;\n margin-right: 8px;\n }\n}\n"}

happy-swan-77

👁 实时预览

📝 源代码