{"html":"\n","css":".animated-button {\n position: relative;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 16px 36px;\n border: 4px solid;\n border-color: transparent;\n font-size: 16px;\n background-color: inherit;\n border-radius: 100px;\n font-weight: 600;\n color: greenyellow;\n box-shadow: 0 0 0 2px greenyellow;\n cursor: pointer;\n overflow: hidden;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.animated-button svg {\n position: absolute;\n width: 24px;\n fill: greenyellow;\n z-index: 9;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.animated-button .arr-1 {\n right: 16px;\n}\n\n.animated-button .arr-2 {\n left: -25%;\n}\n\n.animated-button .circle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n background-color: greenyellow;\n border-radius: 50%;\n opacity: 0;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.animated-button .text {\n position: relative;\n z-index: 1;\n transform: translateX(-12px);\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.animated-button:hover {\n box-shadow: 0 0 0 12px transparent;\n color: #212121;\n border-radius: 12px;\n}\n\n.animated-button:hover .arr-1 {\n right: -25%;\n}\n\n.animated-button:hover .arr-2 {\n left: 16px;\n}\n\n.animated-button:hover .text {\n transform: translateX(12px);\n}\n\n.animated-button:hover svg {\n fill: #212121;\n}\n\n.animated-button:active {\n scale: 0.95;\n box-shadow: 0 0 0 4px greenyellow;\n}\n\n.animated-button:hover .circle {\n width: 220px;\n height: 220px;\n opacity: 1;\n}\n"}

loud-chicken-53

👁 实时预览

📝 源代码

🔗 相关联的样式