{"html":"

\n \n

\n","css":".comic-brutal-button-container {\n --primary-color: #ff3d3d;\n --secondary-color: #3d3dff;\n --text-color: #000000;\n --accent-color: #ffef00;\n --panel-color: #ffffff;\n --shadow-color: rgba(0, 0, 0, 0.75);\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2em;\n}\n\n.comic-brutal-button {\n position: relative;\n font-size: 1.5em;\n border: none;\n background: none;\n cursor: pointer;\n padding: 0;\n transform: rotate(-2deg);\n transform-origin: center;\n transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.button-inner {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--primary-color);\n color: var(--text-color);\n padding: 0.8em 1.5em;\n z-index: 3;\n overflow: hidden;\n transform: skew(-3deg, 1deg);\n transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);\n clip-path: polygon(\n 0% 10%,\n 3% 0%,\n 97% 0%,\n 100% 10%,\n 100% 90%,\n 97% 100%,\n 3% 100%,\n 0% 90%\n );\n}\n\n.button-text {\n position: relative;\n font-weight: 900;\n font-size: 1.2em;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n z-index: 5;\n color: var(--text-color);\n text-shadow:\n 0.05em 0.05em 0 var(--panel-color),\n -0.05em -0.05em 0 var(--panel-color),\n 0.05em -0.05em 0 var(--panel-color),\n -0.05em 0.05em 0 var(--panel-color);\n transform: rotate(2deg);\n}\n\n.button-frame {\n position: absolute;\n top: -0.3em;\n left: -0.3em;\n right: -0.3em;\n bottom: -0.3em;\n background-color: var(--accent-color);\n border: 0.15em solid var(--text-color);\n z-index: 1;\n transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.button-shadow {\n position: absolute;\n top: 0.4em;\n left: 0.4em;\n right: -0.4em;\n bottom: -0.4em;\n background-color: var(--shadow-color);\n z-index: 0;\n transition: all 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n/* Halftone effect using CSS */\n.halftone-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(\n circle at 30% 30%,\n rgba(0, 0, 0, 0.2) 0.1em,\n transparent 0.1em\n );\n background-size: 0.5em 0.5em;\n background-position: 0 0;\n opacity: 0.3;\n z-index: 2;\n mix-blend-mode: multiply;\n}\n\n/* Ink splatter effect using CSS gradients */\n.ink-splatter {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease;\n background: radial-gradient(\n circle at 20% 30%,\n rgba(0, 0, 0, 0.15) 0%,\n rgba(0, 0, 0, 0.08) 20%,\n transparent 50%\n ),\n radial-gradient(\n circle at 70% 65%,\n rgba(0, 0, 0, 0.15) 0%,\n rgba(0, 0, 0, 0.08) 25%,\n transparent 50%\n ),\n radial-gradient(\n circle at 40% 50%,\n rgba(0, 0, 0, 0.15) 0%,\n rgba(0, 0, 0, 0.08) 30%,\n transparent 60%\n ),\n radial-gradient(\n circle at 85% 15%,\n rgba(0, 0, 0, 0.15) 0%,\n rgba(0, 0, 0, 0.08) 15%,\n transparent 40%\n );\n}\n\n/* Button hover state */\n.comic-brutal-button:hover {\n transform: rotate(-1deg) scale(1.05);\n}\n\n.comic-brutal-button:hover .button-inner {\n transform: skew(-5deg, 2deg);\n background-color: var(--secondary-color);\n}\n\n.comic-brutal-button:hover .button-text {\n color: var(--panel-color);\n text-shadow:\n 0.05em 0.05em 0 var(--text-color),\n -0.05em -0.05em 0 var(--text-color),\n 0.05em -0.05em 0 var(--text-color),\n -0.05em 0.05em 0 var(--text-color);\n}\n\n.comic-brutal-button:hover .button-shadow {\n transform: translate(0.2em, 0.2em);\n}\n\n.comic-brutal-button:hover .ink-splatter {\n opacity: 1;\n}\n\n/* Button focus state */\n.comic-brutal-button:focus {\n outline: none;\n}\n\n.comic-brutal-button:focus .button-frame {\n border-color: var(--secondary-color);\n}\n\n/* Button active state */\n.comic-brutal-button:active {\n transform: rotate(0) scale(0.98);\n}\n\n.comic-brutal-button:active .button-inner {\n transform: skew(0, 0);\n}\n\n.comic-brutal-button:active .button-shadow {\n transform: translate(0.1em, 0.1em);\n}\n\n/* Comic burst animation */\n@keyframes burst {\n 0% {\n transform: scale(0.95);\n }\n 50% {\n transform: scale(1.05);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.comic-brutal-button:active .button-text {\n animation: burst 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n/* Add comic-style border on focus */\n@keyframes dash {\n to {\n stroke-dashoffset: -20;\n }\n}\n\n.comic-brutal-button:focus::after {\n content: \"\";\n position: absolute;\n top: -0.5em;\n left: -0.5em;\n right: -0.5em;\n bottom: -0.5em;\n border: 0.15em dashed var(--text-color);\n z-index: 0;\n animation: dash 1s linear infinite;\n pointer-events: none;\n}\n\n/* Additional brutalist comic book elements */\n.comic-brutal-button::before {\n content: \"\";\n position: absolute;\n top: 0.4em;\n left: 0.8em;\n width: 1em;\n height: 1em;\n background-color: var(--accent-color);\n border-radius: 50%;\n z-index: 2;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.comic-brutal-button:hover::before {\n opacity: 0.7;\n}\n\n/* Action lines on click */\n@keyframes action-lines {\n 0% {\n opacity: 0;\n transform: scale(0.7);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: scale(1.2);\n }\n}\n\n.comic-brutal-button:active::before {\n content: \"\";\n position: absolute;\n top: -1em;\n left: -1em;\n right: -1em;\n bottom: -1em;\n background-image: radial-gradient(var(--text-color) 0%, transparent 70%),\n repeating-conic-gradient(\n transparent 0%,\n transparent 5%,\n var(--text-color) 5%,\n var(--text-color) 6%\n );\n opacity: 0;\n z-index: 6;\n mix-blend-mode: overlay;\n pointer-events: none;\n animation: action-lines 0.5s ease-out forwards;\n}\n"}

tiny-dog-80

👁 实时预览

📝 源代码