{"html":"\n","css":"button {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 1em 0em 1em 1em;\n background-color: yellow;\n cursor: pointer;\n box-shadow: 4px 6px 0px black;\n border: 4px solid;\n border-radius: 15px;\n position: relative;\n overflow: hidden;\n z-index: 100;\n transition: box-shadow 250ms, transform 250ms, filter 50ms;\n}\nbutton:hover {\n transform: translate(2px, 2px);\n box-shadow: 2px 3px 0px black;\n}\nbutton:active {\n filter: saturate(0.75);\n}\nbutton::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: pink;\n z-index: -1;\n transform: translateX(-100%);\n transition: transform 250ms;\n}\nbutton:hover::after {\n transform: translateX(0);\n}\n.bgContainer {\n position: relative;\n display: flex;\n justify-content: start;\n align-items: center;\n overflow: hidden;\n max-width: 35%; /* adjust this if the button text is not proper */\n font-size: 2em;\n font-weight: 600;\n}\n.bgContainer span {\n position: relative;\n transform: translateX(-100%);\n transition: all 250ms;\n}\n.button:hover .bgContainer > span {\n transform: translateX(0);\n}\n.arrowContainer {\n padding: 1em;\n margin-inline-end: 1em;\n border: 4px solid;\n border-radius: 50%;\n background-color: pink;\n position: relative;\n overflow: hidden;\n transition: transform 250ms, background-color 250ms;\n z-index: 100;\n}\n.arrowContainer::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: yellow;\n transform: translateX(-100%);\n z-index: -1;\n transition: transform 250ms ease-in-out;\n}\nbutton:hover .arrowContainer::after {\n transform: translateX(0);\n}\nbutton:hover .arrowContainer {\n transform: translateX(5px);\n}\nbutton:active .arrowContainer {\n transform: translateX(8px);\n}\n.arrowContainer svg {\n vertical-align: middle;\n}\n"}

slippery-goat-18

👁 实时预览

📝 源代码