{"html":"

Add To Cart

\n \n \n \n \n \n

\n","css":".button {\n --width: 100px;\n --height: 35px;\n --tooltip-height: 35px;\n --tooltip-width: 90px;\n --gap-between-tooltip-to-button: 18px;\n --button-color: #222;\n --tooltip-color: #fff;\n width: var(--width);\n height: var(--height);\n background: var(--button-color);\n position: relative;\n text-align: center;\n border-radius: 0.5em;\n font-family: \"Arial\";\n transition: background 0.7s;\n}\n\n.button::before {\n position: absolute;\n content: attr(data-tooltip);\n width: var(--tooltip-width);\n height: var(--tooltip-height);\n background-color: #555;\n font-size: 0.9rem;\n color: #fff;\n border-radius: 0.25em;\n line-height: var(--tooltip-height);\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);\n left: calc(50% - var(--tooltip-width) / 2);\n}\n\n.button::after {\n position: absolute;\n content: \"\";\n width: 0;\n height: 0;\n border: 10px solid transparent;\n border-top-color: #555;\n left: calc(50% - 10px);\n bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);\n}\n\n.button::after,\n.button::before {\n opacity: 0;\n visibility: hidden;\n transition: all 0.5s;\n}\n\n.text {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button-wrapper,\n.text,\n.icon {\n overflow: hidden;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n color: #fff;\n}\n\n.text {\n top: 0;\n}\n\n.text,\n.icon {\n transition: top 0.5s;\n}\n\n.icon {\n color: #fff;\n top: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon svg {\n width: 24px;\n height: 24px;\n}\n\n.button:hover {\n background: #222;\n}\n\n.button:hover .text {\n top: -100%;\n}\n\n.button:hover .icon {\n top: 0;\n}\n\n.button:hover:before,\n.button:hover:after {\n opacity: 1;\n visibility: visible;\n}\n\n.button:hover:after {\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);\n}\n\n.button:hover:before {\n bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));\n}\n"}

ugly-pug-52

👁 实时预览

📝 源代码