{"html":"\n","css":".unique-button {\n display: flex;\n align-items: center;\n position: relative;\n width: 180px;\n height: 60px;\n padding: 15px 30px;\n font-size: 18px;\n text-decoration: none;\n color: #fff;\n background-color: #a634db;\n border: none;\n border-radius: 10px;\n overflow: hidden;\n cursor: pointer;\n transition: 0.3s all ease-in-out;\n}\n\n.unique-button:hover {\n transition: 0.3s all ease-in-out;\n box-shadow: 5px 10px 30px #a634db;\n}\n\n.unique-button span {\n display: block;\n margin-left: 0.3em;\n transition: all 0.3s ease-in-out;\n}\n\n.unique-button:hover span {\n transform: translateX(7em);\n}\n\n.unique-button:hover .svg-wrap {\n animation: fly-1 0.6s ease-in-out infinite alternate;\n z-index: 1;\n}\n\n.unique-button svg {\n display: block;\n transform-origin: center center;\n transition: transform 0.3s ease-in-out;\n}\n\n.unique-button:hover svg {\n transform: translateX(2.5em) rotate(45deg) scale(1.2);\n}\n\n.unique-button:active {\n transform: scale(0.95);\n}\n\n@keyframes fly-1 {\n from {\n transform: translateY(0.1em);\n }\n\n to {\n transform: translateY(-0.1em);\n }\n}\n\n.unique-button::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n height: 80%;\n border-bottom-left-radius: 60px;\n border-top-right-radius: 60px;\n border-top-left-radius: 20px;\n border-bottom-right-radius: 20px;\n background-color: #2c3e50;\n transition: all 0.2s ease-in-out;\n}\n\n.unique-button:hover::before {\n width: 100%;\n}\n\n.unique-button::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80%;\n height: 0;\n border-bottom-left-radius: 20px;\n border-top-right-radius: 20px;\n border-top-left-radius: 60px;\n border-bottom-right-radius: 60px;\n background-color: #2c3e50;\n transition: all 0.3s ease-in-out;\n}\n\n.unique-button:hover::after {\n height: 100%;\n}\n"}

silent-puma-3

👁 实时预览

📝 源代码