{"html":"\n","css":".jelly-btn {\n --jelly-bg: #6c63ff;\n --jelly-hover: #7d75ff;\n --jelly-text: #fff;\n --jelly-shadow: rgba(108, 99, 255, 0.3);\n\n position: relative;\n padding: 0.85em 2.2em;\n border: none;\n border-radius: 1.2em;\n background: var(--jelly-bg);\n color: var(--jelly-text);\n font-family: inherit;\n font-size: 1em;\n font-weight: 600;\n cursor: pointer;\n overflow: visible;\n filter: url(#jelly-goo);\n transition:\n transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),\n box-shadow 0.4s ease;\n box-shadow: 0 0.2em 0.8em var(--jelly-shadow);\n}\n\n/* текст */\n\n.jelly-btn__text {\n position: relative;\n z-index: 2;\n display: block;\n transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n/* блобы */\n\n.jelly-btn__blob {\n position: absolute;\n border-radius: 50%;\n background: var(--jelly-bg);\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: -1;\n}\n\n.jelly-btn__blob--1 {\n width: 1.6em;\n height: 1.6em;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n}\n\n.jelly-btn__blob--2 {\n width: 1.2em;\n height: 1.2em;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n}\n\n.jelly-btn__blob--3 {\n width: 0.9em;\n height: 0.9em;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n}\n\n/* стеклянный блик */\n\n.jelly-btn__gloss {\n position: absolute;\n top: 0.1em;\n left: 10%;\n right: 10%;\n height: 40%;\n border-radius: 1em 1em 50% 50%;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.25) 0%,\n rgba(255, 255, 255, 0.05) 100%\n );\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n/* svg фильтр скрыт */\n\n.jelly-btn__svg {\n position: absolute;\n pointer-events: none;\n}\n\n/* hover — тянется + блобы вылезают */\n\n.jelly-btn:hover {\n transform: scaleX(1.06) scaleY(0.94);\n box-shadow: 0 0.3em 1.2em var(--jelly-shadow);\n background: var(--jelly-hover);\n}\n\n.jelly-btn:hover .jelly-btn__text {\n transform: scaleX(0.94) scaleY(1.06);\n}\n\n.jelly-btn:hover .jelly-btn__blob--1 {\n transform: translate(-160%, -120%) scale(1);\n}\n\n.jelly-btn:hover .jelly-btn__blob--2 {\n transform: translate(120%, -100%) scale(1);\n transition-delay: 0.05s;\n}\n\n.jelly-btn:hover .jelly-btn__blob--3 {\n transform: translate(-80%, 130%) scale(1);\n transition-delay: 0.1s;\n}\n\n.jelly-btn:hover .jelly-btn__gloss {\n opacity: 0.7;\n}\n\n/* active — сжимается обратно */\n\n.jelly-btn:active {\n transform: scaleX(0.94) scaleY(1.06);\n transition-duration: 0.1s;\n box-shadow: 0 0.15em 0.5em var(--jelly-shadow);\n}\n\n.jelly-btn:active .jelly-btn__text {\n transform: scaleX(1.06) scaleY(0.94);\n transition-duration: 0.1s;\n}\n\n.jelly-btn:active .jelly-btn__blob {\n transform: translate(-50%, -50%) scale(0) !important;\n transition-duration: 0.15s;\n}\n\n.jelly-btn:active .jelly-btn__gloss {\n opacity: 0.3;\n}\n\n/* focus */\n\n.jelly-btn:focus-visible {\n outline: 0.15em solid var(--jelly-hover);\n outline-offset: 0.25em;\n}\n"}

clever-grasshopper-3

👁 实时预览

📝 源代码