{"html":"","css":"button {\n position: relative;\n padding: 15px 35px;\n font-size: 15px;\n font-weight: bold;\n color: #2F5C2F;\n background-color: transparent;\n border: 3px solid #2F5C2F;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.5s;\n}\n\nbutton::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 10px;\n left: 10px;\n background-color: #D5A084;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.5s;\n}\n\nbutton:hover::after {\n top: 0;\n left: 0;\n}\n\n.icon-1 {\n position: absolute;\n width: 15%;\n top: 10px;\n right: 15px;\n color: #2F5C2F;\n transform-origin: 100% 100%;\n transform: rotate(-25deg) translateX(120%) translateY(20%);\n z-index: -1;\n transition: all 0.5s;\n}\n\nbutton:hover .icon-1 {\n width: 25%;\n transform: rotate(10deg) translateX(110%) translateY(-40%);\n}\n\n.icon-2 {\n position: absolute;\n width: 15%;\n top: 20px;\n left: 10px;\n color: #2F5C2F;\n transform-origin: 100% 100%;\n z-index: -1;\n transition: all 0.5s;\n}\n\nbutton:hover .icon-2 {\n width: 50%;\n top: -40px;\n left: -80px;\n transform: rotate(90deg);\n z-index: 1;\n}"}

smooth-stingray-40

👁 实时预览

📝 源代码