{"html":"\n","css":"button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 0 10px;\n color: white;\n text-shadow: 2px 2px rgb(116, 116, 116);\n text-transform: uppercase;\n cursor: pointer;\n border: solid 2px black;\n letter-spacing: 1px;\n font-weight: 600;\n font-size: 17px;\n background-color: hsl(49deg 98% 60%);\n border-radius: 50px;\n position: relative;\n overflow: hidden;\n transition: all 0.5s ease;\n}\n\nbutton:active {\n transform: scale(0.9);\n transition: all 100ms ease;\n}\n\nbutton svg {\n transition: all 0.5s ease;\n z-index: 2;\n}\n\n.play {\n transition: all 0.5s ease;\n transition-delay: 300ms;\n}\n\nbutton:hover svg {\n transform: scale(3) translate(50%);\n}\n\n.now {\n position: absolute;\n left: 0;\n transform: translateX(-100%);\n transition: all 0.5s ease;\n z-index: 2;\n}\n\nbutton:hover .now {\n transform: translateX(10px);\n transition-delay: 300ms;\n}\n\nbutton:hover .play {\n transform: translateX(200%);\n transition-delay: 300ms;\n}\n"}

big-moose-69

👁 实时预览

📝 源代码