{"html":"

\n \n

\n","css":".button-container {\n display: flex;\n justify-content: center;\n gap: 20px;\n padding: 20px;\n}\n\n.brutalist-button {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: 3px solid #ffffff;\n border-radius: 12px;\n padding: 0;\n text-decoration: none;\n color: #000000;\n font-weight: bold;\n position: relative;\n box-shadow: 4px 4px 0px #e71c1c;\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n height: 130px;\n width: 130px;\n cursor: pointer;\n}\n\n.brutalist-button.gemini {\n background: linear-gradient(135deg, #5688fd, #a9daff, #ffffff);\n background-size: 300% 300%;\n animation: gradientShift 6s ease infinite;\n}\n\n@keyframes gradientShift {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\n.brutalist-button::before {\n content: \"\";\n position: absolute;\n left: 50%;\n bottom: -150%;\n width: 300%;\n height: 300%;\n border-radius: 50%;\n transform: translateX(-50%) scale(0);\n transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n z-index: 1;\n}\n\n.brutalist-button.gemini::before {\n background: linear-gradient(135deg, #5688fd, #a9daff, #ffffff);\n background-size: 300% 300%;\n animation: gradientShift 6s ease infinite;\n}\n\n.brutalist-button:hover::before {\n transform: translateX(-50%) scale(1);\n}\n\n.brutalist-button:hover {\n transform: translate(-4px, -4px);\n box-shadow: 8px 8px 0px #e71c1c;\n}\n\n.brutalist-button:active {\n transform: translate(2px, 2px);\n box-shadow: 2px 2px 0px #e71c1c;\n}\n\n/* Shared circular logo style */\n.gemini-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n width: 90px;\n height: 90px;\n background: linear-gradient(135deg, #ffffff, #b6e0fd, #719bfd);\n background-size: 300% 300%;\n animation: gradientShift 6s ease infinite;\n border-radius: 50%;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n@keyframes gradientShift {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\n/* Gemini icon style */\n.gemini-icon {\n width: 54px;\n height: 54px;\n fill: dodgerblue;\n stroke: dodgerblue;\n stroke-width: 16;\n transition: all 0.6s ease-in-out;\n}\n\n/* Hover animations */\n@keyframes spin {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n\n.brutalist-button:hover .gemini-logo {\n animation: spin 5s linear infinite;\n width: 50px;\n height: 50px;\n top: 28%;\n}\n\n.brutalist-button:hover .gemini-icon {\n transform: scale(0.6);\n}\n\n/* Button text */\n.button-text {\n display: flex;\n flex-direction: column;\n align-items: center;\n line-height: 1.3;\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n text-align: center;\n opacity: 0;\n transform: translateY(20px);\n z-index: 2;\n position: absolute;\n bottom: 18px;\n left: 0;\n right: 0;\n}\n\n.button-text span:first-child {\n font-size: 13px;\n font-weight: 500;\n margin-bottom: 2px;\n}\n\n.button-text span:last-child {\n font-size: 16px;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n color: #ffffff;\n}\n\n.brutalist-button:hover .button-text {\n opacity: 1;\n transform: translateY(0);\n}\n\n@media (hover: hover) and (pointer: fine) {\n .brutalist-button:hover {\n transform: translate(-4px, -4px);\n box-shadow: 8px 8px 0px #e71c1c;\n }\n}\n"}

nasty-swan-29

👁 实时预览

📝 源代码