{"html":"

\n \n \n \n \n \n

\n","css":".button {\n --stone-50: #fafaf9;\n --stone-800: #292524;\n --yellow-300: #fde047;\n --yellow-400: #facc15;\n --yellow-500: #eab308;\n --black-25: rgba(0, 0, 0, 0.25);\n\n position: relative;\n display: block;\n width: 4rem;\n height: 4rem;\n cursor: pointer;\n\n & > button {\n cursor: pointer;\n display: inline-block;\n height: 100%;\n width: 100%;\n appearance: none;\n border: 2px solid var(--stone-800);\n border-radius: 0.25rem;\n background-color: var(--yellow-400);\n outline: 2px solid transparent;\n outline-offset: 2px;\n cursor: pointer;\n transition: background-color 0.2s;\n\n &:hover {\n background-color: var(--yellow-300);\n }\n\n &:checked {\n background-color: var(--stone-800);\n border-color: var(--stone-800);\n\n &:hover {\n background-color: #44403c;\n }\n }\n\n &:active {\n outline-color: var(--stone-800);\n }\n\n &:focus-visible {\n outline-color: var(--stone-800);\n outline-style: dashed;\n }\n }\n\n & > span:nth-child(2) {\n position: absolute;\n inset: 3px;\n pointer-events: none;\n background-color: var(--yellow-400);\n border-bottom: 2px solid var(--black-25);\n transition: transform 75ms;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background-image: radial-gradient(\n rgb(255 255 255 / 80%) 20%,\n transparent 20%\n ),\n radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);\n background-position:\n 0 0,\n 4px 4px;\n background-size: 8px 8px;\n mix-blend-mode: hard-light;\n opacity: 0.5;\n animation: dots 0.5s infinite linear;\n }\n }\n\n & > span:nth-child(3) {\n position: absolute;\n pointer-events: none;\n inset: 0;\n\n &::before {\n content: \"\";\n width: 0.375rem;\n height: 0.375rem;\n position: absolute;\n top: 0.25rem;\n left: 0.25rem;\n background-color: var(--stone-800);\n border-radius: 0.125rem;\n box-shadow:\n 3.125em 0 var(--stone-800),\n 0 3.125em var(--stone-800),\n 3.125em 3.125em var(--stone-800);\n }\n }\n\n & > span:nth-child(4) {\n position: absolute;\n pointer-events: none;\n inset: 0;\n filter: drop-shadow(0.25em 0.25em 0 rgba(0, 0, 0, 0.2));\n transition: all 75ms;\n\n &::after {\n content: \"\";\n width: 0.25rem;\n height: 0.25rem;\n position: absolute;\n top: 0.875rem;\n left: 1rem;\n border-radius: 0.0625px;\n background-color: var(--stone-800);\n box-shadow:\n 0.75em 2em var(--stone-800),\n 1em 2em var(--stone-800),\n 0.75em 1.75em var(--stone-800),\n 1em 1.75em var(--stone-800),\n 0.75em 1.25em var(--stone-800),\n 1em 1.25em var(--stone-800),\n 0.75em 1em var(--stone-800),\n 1em 1em var(--stone-800),\n 1em 0.75em var(--stone-800),\n 1.5em 0.75em var(--stone-800),\n 1.25em 0.75em var(--stone-800),\n 1.25em -0.25em var(--stone-800),\n 1.5em 0em var(--stone-800),\n 1.25em 0.5em var(--stone-800),\n 1.5em 0.5em var(--stone-800),\n 1.25em 0.25em var(--stone-800),\n 1.5em 0.25em var(--stone-800),\n 1.25em 0 var(--stone-800),\n 1em -0.25em var(--stone-800),\n 0.75em -0.25em var(--stone-800),\n 0.5em -0.25em var(--stone-800),\n 0.25em -0.25em var(--stone-800),\n 0.25em 0 var(--stone-800),\n 0 0.25em var(--stone-800),\n 0 0.5em var(--stone-800),\n 0.25em 0.25em var(--stone-800),\n 0.25em 0.5em var(--stone-800);\n }\n }\n\n & > span:nth-child(5) {\n position: absolute;\n background-color: var(--yellow-400);\n border: 2px solid var(--stone-800);\n border-radius: 0.75rem;\n pointer-events: none;\n z-index: -1;\n inset: 0.5rem 1.5rem;\n box-shadow:\n 7px 0 0 0 var(--stone-800),\n inset 0 2px 0 0 var(--yellow-300),\n inset 0 -2px 0 0 var(--yellow-500);\n transition: all 0ms cubic-bezier(0, 0.5, 0.4, 1);\n }\n\n & button:active ~ span:nth-child(5) {\n transform: translateY(-200%);\n transition-duration: 200ms;\n opacity: 0;\n }\n\n & button:hover ~ span:nth-child(4) {\n filter: drop-shadow(0.125em 0.125em 0 rgba(0, 0, 0, 0.2));\n }\n}\n\n@keyframes dots {\n 0% {\n background-position:\n 0 0,\n 4px 4px;\n }\n 100% {\n background-position:\n 8px 0,\n 12px 4px;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n .button {\n & button:active,\n & button:focus-visible {\n outline-color: var(--yellow-400);\n }\n }\n}\n"}

helpless-vampirebat-43

👁 实时预览

📝 源代码