{"html":"\n","css":".morph-btn {\n position: relative;\n padding: 22px 56px;\n font-family: \"Segoe UI\", system-ui, sans-serif;\n font-size: 16px;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: #ffffff;\n background: transparent;\n border: none;\n cursor: pointer;\n overflow: visible;\n isolation: isolate;\n}\n\n/* Main fill that morphs */\n.morph-btn .btn-fill {\n position: absolute;\n inset: 0;\n background: #0d0d0d;\n border-radius: 4px;\n transition: border-radius 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n z-index: 1;\n}\n\n.morph-btn:hover .btn-fill {\n border-radius: 50px;\n animation: jelly 0.5s ease;\n}\n\n@keyframes jelly {\n 0% {\n transform: scale(1, 1);\n }\n 30% {\n transform: scale(1.15, 0.85);\n }\n 50% {\n transform: scale(0.9, 1.1);\n }\n 70% {\n transform: scale(1.05, 0.95);\n }\n 100% {\n transform: scale(1, 1);\n }\n}\n\n/* Floating dots that orbit */\n.morph-btn .orbit-dots {\n position: absolute;\n inset: -30px;\n pointer-events: none;\n}\n\n.morph-btn .orbit-dots span {\n position: absolute;\n width: 8px;\n height: 8px;\n background: #0d0d0d;\n border-radius: 50%;\n opacity: 1;\n transition: opacity 0.3s ease;\n}\n\n.morph-btn:hover .orbit-dots span {\n opacity: 1;\n}\n\n.morph-btn .orbit-dots span:nth-child(1) {\n top: 0;\n left: 50%;\n animation: orbit1 3s linear infinite;\n}\n\n.morph-btn .orbit-dots span:nth-child(2) {\n bottom: 0;\n left: 50%;\n animation: orbit2 3s linear infinite;\n}\n\n.morph-btn .orbit-dots span:nth-child(3) {\n top: 50%;\n left: 0;\n animation: orbit3 4s linear infinite;\n}\n\n.morph-btn .orbit-dots span:nth-child(4) {\n top: 50%;\n right: 0;\n animation: orbit4 4s linear infinite;\n}\n\n@keyframes orbit1 {\n 0% {\n transform: translateX(-50%) translateY(0) scale(1);\n }\n 25% {\n transform: translateX(30px) translateY(10px) scale(0.6);\n }\n 50% {\n transform: translateX(-50%) translateY(20px) scale(1);\n }\n 75% {\n transform: translateX(-80px) translateY(10px) scale(0.6);\n }\n 100% {\n transform: translateX(-50%) translateY(0) scale(1);\n }\n}\n\n@keyframes orbit2 {\n 0% {\n transform: translateX(-50%) translateY(0) scale(0.6);\n }\n 25% {\n transform: translateX(-80px) translateY(-10px) scale(1);\n }\n 50% {\n transform: translateX(-50%) translateY(-20px) scale(0.6);\n }\n 75% {\n transform: translateX(30px) translateY(-10px) scale(1);\n }\n 100% {\n transform: translateX(-50%) translateY(0) scale(0.6);\n }\n}\n\n@keyframes orbit3 {\n 0% {\n transform: translateY(-50%) translateX(0) scale(0.8);\n }\n 50% {\n transform: translateY(-50%) translateX(-15px) scale(1.2);\n }\n 100% {\n transform: translateY(-50%) translateX(0) scale(0.8);\n }\n}\n\n@keyframes orbit4 {\n 0% {\n transform: translateY(-50%) translateX(0) scale(1.2);\n }\n 50% {\n transform: translateY(-50%) translateX(15px) scale(0.8);\n }\n 100% {\n transform: translateY(-50%) translateX(0) scale(1.2);\n }\n}\n\n/* Text split animation */\n.morph-btn .btn-text {\n position: relative;\n display: inline-block;\n z-index: 3;\n}\n\n.morph-btn .btn-text span {\n display: inline-block;\n transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n transition-delay: calc(var(--i) * 0.03s);\n}\n\n.morph-btn:hover .btn-text span {\n transform: translateY(-100%);\n animation: letterBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;\n animation-delay: calc(var(--i) * 0.03s);\n}\n\n@keyframes letterBounce {\n 0% {\n transform: translateY(0);\n }\n 40% {\n transform: translateY(-120%);\n }\n 70% {\n transform: translateY(10%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n\n/* Corner accents */\n.morph-btn .corners span {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #0d0d0d;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n opacity: 1;\n}\n\n.morph-btn .corners span:nth-child(1) {\n top: -10px;\n left: -10px;\n border-right: none;\n border-bottom: none;\n}\n\n.morph-btn .corners span:nth-child(2) {\n top: -10px;\n right: -10px;\n border-left: none;\n border-bottom: none;\n}\n\n.morph-btn .corners span:nth-child(3) {\n bottom: -10px;\n left: -10px;\n border-right: none;\n border-top: none;\n}\n\n.morph-btn .corners span:nth-child(4) {\n bottom: -10px;\n right: -10px;\n border-left: none;\n border-top: none;\n}\n\n.morph-btn:hover .corners span {\n opacity: 1;\n}\n\n.morph-btn:hover .corners span:nth-child(1) {\n transform: translate(-5px, -5px) rotate(-5deg);\n}\n\n.morph-btn:hover .corners span:nth-child(2) {\n transform: translate(5px, -5px) rotate(5deg);\n}\n\n.morph-btn:hover .corners span:nth-child(3) {\n transform: translate(-5px, 5px) rotate(5deg);\n}\n\n.morph-btn:hover .corners span:nth-child(4) {\n transform: translate(5px, 5px) rotate(-5deg);\n}\n\n/* Magnetic shadow */\n.morph-btn .shadow {\n position: absolute;\n inset: 5px;\n background: rgba(13, 13, 13, 0.3);\n border-radius: 4px;\n filter: blur(15px);\n z-index: 0;\n transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n transform: translateY(10px);\n}\n\n.morph-btn:hover .shadow {\n border-radius: 50px;\n transform: translateY(15px) scale(1.1);\n filter: blur(20px);\n}\n\n/* Click effect */\n.morph-btn:active .btn-fill {\n transform: scale(0.92);\n transition: transform 0.1s ease;\n}\n\n.morph-btn:active .shadow {\n transform: translateY(3px) scale(0.85);\n filter: blur(8px);\n opacity: 0.5;\n transition: all 0.1s ease;\n}\n\n.morph-btn:active .btn-text {\n transform: scale(0.95);\n transition: transform 0.1s ease;\n}\n\n.morph-btn:active .corners span:nth-child(1) {\n transform: translate(-15px, -15px) rotate(-15deg) scale(0.8);\n}\n\n.morph-btn:active .corners span:nth-child(2) {\n transform: translate(15px, -15px) rotate(15deg) scale(0.8);\n}\n\n.morph-btn:active .corners span:nth-child(3) {\n transform: translate(-15px, 15px) rotate(15deg) scale(0.8);\n}\n\n.morph-btn:active .corners span:nth-child(4) {\n transform: translate(15px, 15px) rotate(-15deg) scale(0.8);\n}\n\n.morph-btn:active .orbit-dots span {\n animation-play-state: paused;\n transform: scale(1.5);\n}\n"}

grumpy-swan-25

👁 实时预览

📝 源代码