{"html":"\n","css":".c-button {\n color: #000;\n font-weight: 700;\n font-size: 16px;\n text-decoration: none;\n padding: 0.9em 1.6em;\n cursor: pointer;\n display: inline-block;\n vertical-align: middle;\n position: relative;\n z-index: 1;\n}\n\n.c-button--gooey {\n color: #06c8d9;\n text-transform: uppercase;\n letter-spacing: 2px;\n border: 4px solid #06c8d9;\n border-radius: 0;\n position: relative;\n transition: all 700ms ease;\n}\n\n.c-button--gooey .c-button__blobs {\n height: 100%;\n filter: url(#goo);\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n bottom: -3px;\n right: -1px;\n z-index: -1;\n}\n\n.c-button--gooey .c-button__blobs div {\n background-color: #06c8d9;\n width: 34%;\n height: 100%;\n border-radius: 100%;\n position: absolute;\n transform: scale(1.4) translateY(125%) translateZ(0);\n transition: all 700ms ease;\n}\n\n.c-button--gooey .c-button__blobs div:nth-child(1) {\n left: -5%;\n}\n\n.c-button--gooey .c-button__blobs div:nth-child(2) {\n left: 30%;\n transition-delay: 60ms;\n}\n\n.c-button--gooey .c-button__blobs div:nth-child(3) {\n left: 66%;\n transition-delay: 25ms;\n}\n\n.c-button--gooey:hover {\n color: #fff;\n}\n\n.c-button--gooey:hover .c-button__blobs div {\n transform: scale(1.4) translateY(0) translateZ(0);\n}"}

nice-walrus-6

👁 实时预览

📝 源代码

🔗 相关联的样式