{"html":"

\n \n

\n\n\n \n \n \n \n \n \n\n","css":"/* Defs */\n@property --angle-1 {\n syntax: \"\";\n inherits: false;\n initial-value: -75deg;\n}\n\n@property --angle-2 {\n syntax: \"\";\n inherits: false;\n initial-value: -45deg;\n}\n\n:root {\n --global--size: clamp(2rem, 4vw, 5rem);\n --anim--hover-time: 400ms;\n --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n/* ========== BUTTON ========== */\n\n/* Button Wrap Container */\n.button-wrap {\n position: relative;\n z-index: 2;\n border-radius: 999vw;\n background: transparent;\n pointer-events: none;\n transition: all var(--anim--hover-time) var(--anim--hover-ease);\n}\n\n/* Button Shadow Container */\n.button-shadow {\n --shadow-cuttoff-fix: 2em;\n position: absolute;\n width: calc(100% + var(--shadow-cuttoff-fix));\n height: calc(100% + var(--shadow-cuttoff-fix));\n top: calc(0% - var(--shadow-cuttoff-fix) / 2);\n left: calc(0% - var(--shadow-cuttoff-fix) / 2);\n filter: blur(clamp(2px, 0.125em, 12px));\n -webkit-filter: blur(clamp(2px, 0.125em, 12px));\n -moz-filter: blur(clamp(2px, 0.125em, 12px));\n -ms-filter: blur(clamp(2px, 0.125em, 12px));\n overflow: visible;\n pointer-events: none;\n}\n\n/* Shadow */\n.button-shadow::after {\n content: \"\";\n position: absolute;\n z-index: 0;\n inset: 0;\n border-radius: 999vw;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));\n width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);\n height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);\n top: calc(var(--shadow-cuttoff-fix) - 0.5em);\n left: calc(var(--shadow-cuttoff-fix) - 0.875em);\n padding: 0.125em;\n box-sizing: border-box;\n mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0);\n mask-composite: exclude;\n transition: all var(--anim--hover-time) var(--anim--hover-ease);\n overflow: visible;\n opacity: 1;\n}\n\n/* ========== BUTTON BASE STYLES ========== */\n\nbutton {\n /* Basic Styling */\n --border-width: clamp(1px, 0.0625em, 4px);\n all: unset;\n cursor: pointer;\n position: relative;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n pointer-events: auto;\n z-index: 3;\n background: linear-gradient(\n -75deg,\n rgba(255, 255, 255, 0.05),\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.05)\n );\n border-radius: 999vw;\n box-shadow:\n inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),\n inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),\n 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),\n 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),\n 0 0 0 0 rgba(255, 255, 255, 1);\n backdrop-filter: blur(clamp(1px, 0.125em, 4px));\n -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));\n -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));\n -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));\n transition: all var(--anim--hover-time) var(--anim--hover-ease);\n}\n\nbutton:hover {\n transform: scale(0.975);\n backdrop-filter: blur(0.01em);\n -webkit-backdrop-filter: blur(0.01em);\n -moz-backdrop-filter: blur(0.01em);\n -ms-backdrop-filter: blur(0.01em);\n box-shadow:\n inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),\n inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),\n 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),\n 0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),\n 0 0 0 0 rgba(255, 255, 255, 1);\n}\n\n/* Button Text */\nbutton span {\n position: relative;\n display: block;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n font-family: \"Inter\", sans-serif;\n letter-spacing: -0.05em;\n font-weight: 500;\n font-size: 1em;\n color: rgba(50, 50, 50, 1);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);\n transition: all var(--anim--hover-time) var(--anim--hover-ease);\n padding-inline: 1.5em;\n padding-block: 0.875em;\n}\n\nbutton:hover span {\n text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);\n}\n\n/* Text */\nbutton span::after {\n content: \"\";\n display: block;\n position: absolute;\n z-index: 1;\n width: calc(100% - var(--border-width)); /* Prevent overlapping border */\n height: calc(100% - var(--border-width));\n top: calc(0% + var(--border-width) / 2);\n left: calc(0% + var(--border-width) / 2);\n box-sizing: border-box;\n border-radius: 999vw;\n overflow: clip;\n background: linear-gradient(\n var(--angle-2),\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, 0.5) 40% 50%,\n rgba(255, 255, 255, 0) 55%\n );\n z-index: 3;\n mix-blend-mode: screen;\n pointer-events: none;\n background-size: 200% 200%;\n background-position: 0% 50%;\n background-repeat: no-repeat;\n transition:\n background-position calc(var(--anim--hover-time) * 1.25)\n var(--anim--hover-ease),\n --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);\n}\n\nbutton:hover span::after {\n background-position: 25% 50%;\n}\n\nbutton:active span::after {\n background-position: 50% 15%;\n --angle-2: -15deg;\n}\n\n/* Touch Devices */\n@media (hover: none) and (pointer: coarse) {\n button span::after,\n button:active span::after {\n --angle-2: -45deg;\n }\n}\n\n/* ========== BUTTON OUTLINE ========== */\n\n/* Outline */\nbutton::after {\n content: \"\";\n position: absolute;\n z-index: 1;\n inset: 0;\n border-radius: 999vw;\n width: calc(100% + var(--border-width));\n height: calc(100% + var(--border-width));\n top: calc(0% - var(--border-width) / 2);\n left: calc(0% - var(--border-width) / 2);\n padding: var(--border-width);\n box-sizing: border-box;\n background: conic-gradient(\n from var(--angle-1) at 50% 50%,\n rgba(0, 0, 0, 0.5),\n rgba(0, 0, 0, 0) 5% 40%,\n rgba(0, 0, 0, 0.5) 50%,\n rgba(0, 0, 0, 0) 60% 95%,\n rgba(0, 0, 0, 0.5)\n ),\n linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));\n mask:\n linear-gradient(#000 0 0) content-box,\n linear-gradient(#000 0 0);\n mask-composite: exclude;\n transition:\n all var(--anim--hover-time) var(--anim--hover-ease),\n --angle-1 500ms ease;\n box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);\n}\n\nbutton:hover::after {\n --angle-1: -125deg;\n}\n\nbutton:active::after {\n --angle-1: -75deg;\n}\n\n@media (hover: none) and (pointer: coarse) {\n button::after,\n button:hover::after,\n button:active::after {\n --angle-1: -75deg;\n }\n}\n\n/* Shadow Hover */\n.button-wrap:has(button:hover) .button-shadow {\n filter: blur(clamp(2px, 0.0625em, 6px));\n -webkit-filter: blur(clamp(2px, 0.0625em, 6px));\n -moz-filter: blur(clamp(2px, 0.0625em, 6px));\n -ms-filter: blur(clamp(2px, 0.0625em, 6px));\n transition: filter var(--anim--hover-time) var(--anim--hover-ease);\n}\n\n.button-wrap:has(button:hover) .button-shadow::after {\n top: calc(var(--shadow-cuttoff-fix) - 0.875em);\n opacity: 1;\n}\n\n/* Rotation */\n.button-wrap:has(button:active) {\n transform: rotate3d(1, 0, 0, 25deg);\n}\n\n.button-wrap:has(button:active) button {\n box-shadow:\n inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),\n inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),\n 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),\n 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),\n 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),\n 0 0.25em 0 0 rgba(255, 255, 255, 0.75),\n inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);\n}\n\n.button-wrap:has(button:active) .button-shadow {\n filter: blur(clamp(2px, 0.125em, 12px));\n -webkit-filter: blur(clamp(2px, 0.125em, 12px));\n -moz-filter: blur(clamp(2px, 0.125em, 12px));\n -ms-filter: blur(clamp(2px, 0.125em, 12px));\n}\n\n.button-wrap:has(button:active) .button-shadow::after {\n top: calc(var(--shadow-cuttoff-fix) - 0.5em);\n opacity: 0.75;\n}\n\n.button-wrap:has(button:active) span {\n text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);\n}\n"}

massive-snail-29

👁 实时预览

📝 源代码