{"html":"\n\n \n \n \n \n \n \n \n\n Add to Cart\n

\n\n","css":".cart-button {\n background: linear-gradient(135deg, #2962ff, #1565c0);\n color: white;\n padding: 12px 24px;\n border: none;\n border-radius: 25px;\n cursor: pointer;\n font-size: 16px;\n font-family: \"Poppins\", sans-serif;\n transition: all 0.3s ease;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n position: relative;\n overflow: hidden;\n}\n\n.cart-button::before {\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.cart-button:hover::before {\n left: 100%;\n}\n\n.cart-button:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 15px rgba(41, 98, 255, 0.4);\n}\n\n.cart-button:active {\n transform: scale(0.95);\n}\n\n.cart-icon {\n display: inline-block;\n margin-right: 8px;\n transition: all 0.3s ease;\n}\n\n.cart-icon svg {\n vertical-align: middle;\n width: 20px;\n height: 20px;\n}\n\n.cart-button:hover .cart-icon svg {\n transform: scale(1.1);\n}\n\n@keyframes addedToCart {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.4) rotate(45deg);\n }\n\n 100% {\n transform: scale(1) rotate(0);\n }\n}\n\n@keyframes progress {\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n}\n\n.progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3px;\n background: rgba(255, 255, 255, 0.8);\n width: 0;\n}\n\n.adding {\n pointer-events: none;\n opacity: 0.8;\n}\n\n.adding .progress-bar {\n animation: progress 1s ease-in-out;\n}\n\n.success .cart-icon {\n animation: addedToCart 0.5s ease-in-out;\n}\n\n.cart-button {\n transition:\n all 0.3s ease,\n color 0.2s ease;\n}\n\n.cart-button:hover {\n color: rgba(255, 255, 255, 0.9);\n letter-spacing: 1px;\n}\n\n@keyframes checkmark {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.success-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.success .success-icon {\n display: block !important;\n animation: checkmark 0.5s ease-in-out forwards;\n}\n\n.cart-button {\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n\n.cart-button:active {\n transform: scale(0.95) translateY(2px);\n box-shadow: 0 0 5px rgba(41, 98, 255, 0.2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cart-button {\n transition: none;\n }\n\n .cart-button:hover,\n .cart-button:active {\n animation: none;\n transform: none;\n }\n}\n\n.cart-button {\n transform-style: preserve-3d;\n perspective: 1000px;\n background: linear-gradient(135deg, #2962ff, #1565c0);\n transform: translateZ(0);\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.cart-button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.1),\n rgba(255, 255, 255, 0)\n );\n pointer-events: none;\n}\n\n.cart-button:active {\n transform: translateY(2px) translateZ(-5px);\n box-shadow: 0 0 5px rgba(41, 98, 255, 0.2);\n}\n\n.cart-button:hover {\n transform: translateZ(10px) scale(1.02);\n box-shadow:\n 0 4px 15px rgba(41, 98, 255, 0.4),\n 0 0 20px rgba(41, 98, 255, 0.1),\n 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n\n.cart-icon {\n transform: translateZ(5px);\n}\n\n.progress-bar {\n transform: translateZ(2px);\n}\n\n.cart-button {\n box-shadow:\n 0 2px 5px rgba(0, 0, 0, 0.2),\n 0 5px 15px rgba(41, 98, 255, 0.1),\n 0 0 0 1px rgba(255, 255, 255, 0.1) inset;\n}\n\n.cart-button {\n background: linear-gradient(135deg, #2962ff, #1565c0);\n color: white;\n padding: 12px 24px;\n border: none;\n border-radius: 25px;\n cursor: pointer;\n font-size: 16px;\n font-family: \"Poppins\", sans-serif;\n transition: all 0.3s ease;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n position: relative;\n overflow: hidden;\n transform-style: preserve-3d;\n perspective: 1000px;\n background: linear-gradient(135deg, #2962ff, #1565c0);\n transform: translateZ(0);\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow:\n 0 2px 5px rgba(0, 0, 0, 0.2),\n 0 5px 15px rgba(41, 98, 255, 0.1),\n 0 0 0 1px rgba(255, 255, 255, 0.1) inset;\n overflow: hidden;\n\n transition:\n all 0.3s ease,\n transform 0.2s ease;\n}\n\n@media (hover: hover) {\n .cart-button:hover {\n transform: translateZ(10px) rotateX(2deg) rotateY(2deg) scale(1.02);\n box-shadow:\n 0 4px 15px rgba(41, 98, 255, 0.4),\n 0 0 20px rgba(41, 98, 255, 0.1),\n 0 0 0 1px rgba(255, 255, 255, 0.1);\n }\n}\n\n.cart-button:hover {\n transform: translateZ(10px);\n background: linear-gradient(135deg, #3d7fff, #1976d2);\n box-shadow:\n 0 8px 25px rgba(41, 98, 255, 0.3),\n 0 0 0 1px rgba(255, 255, 255, 0.15) inset,\n 0 0 20px rgba(41, 98, 255, 0.2),\n 0 0 0 4px rgba(41, 98, 255, 0.1);\n letter-spacing: 1px;\n}\n\n.cart-button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 50%;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.15),\n rgba(255, 255, 255, 0.05)\n );\n border-radius: 25px 25px 100px 100px;\n}\n\n.cart-button:active {\n transform: translateY(2px) translateZ(-5px);\n box-shadow:\n 0 4px 15px rgba(41, 98, 255, 0.2),\n 0 0 0 1px rgba(255, 255, 255, 0.1) inset;\n}\n\n@keyframes subtle-pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(41, 98, 255, 0.4);\n }\n\n 70% {\n box-shadow: 0 0 0 10px rgba(41, 98, 255, 0);\n }\n\n 100% {\n box-shadow: 0 0 0 0 rgba(41, 98, 255, 0);\n }\n}\n\n.cart-button {\n animation: subtle-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);\n}\n\n.success {\n background: linear-gradient(135deg, #00c853, #009624) !important;\n transform: translateZ(5px);\n box-shadow:\n 0 4px 15px rgba(0, 200, 83, 0.4),\n 0 0 0 1px rgba(255, 255, 255, 0.1) inset;\n}\n\n.success .cart-icon {\n filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));\n}\n\n.cart-button {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n.cart-toggle:checked + .cart-button {\n pointer-events: none;\n animation: addToCart 1.5s ease-in-out forwards;\n}\n\n@keyframes addToCart {\n 0% {\n pointer-events: none;\n opacity: 0.8;\n }\n 66% {\n background: linear-gradient(135deg, #2962ff, #1565c0);\n }\n 67% {\n background: linear-gradient(135deg, #00c853, #009624);\n }\n 100% {\n pointer-events: all;\n opacity: 1;\n }\n}\n\n.cart-toggle:checked + .cart-button .progress-bar {\n animation: progress 1s ease-in-out;\n}\n\n.cart-toggle:checked + .cart-button .cart-icon {\n animation: addedToCart 0.5s ease-in-out 1s;\n}\n\n/* Auto-reset checkbox after animation */\n.cart-toggle:checked {\n animation: reset 0.1s 1.5s forwards;\n}\n\n@keyframes reset {\n to {\n checked: false;\n }\n}\n\n/* Hide default checkbox */\n.cart-toggle {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n"}

new-owl-91

👁 实时预览

📝 源代码