{"html":"

\n \n

\n","css":".button-container {\n display: flex;\n justify-content: center;\n gap: 20px; /* Adjust this value to increase or decrease space between buttons */\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 #000000;\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 #000000;\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.openai {\n background-color: #356854;\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.openai::before {\n background-color: #316b58;\n}\n\n.brutalist-button.claude::before {\n background-color: #e3d19c;\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 #000000;\n}\n\n.brutalist-button:active {\n transform: translate(2px, 2px);\n box-shadow: 2px 2px 0px #000000;\n}\n\n.openai-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 border-radius: 50%;\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n}\n\n.openai-logo {\n align-items: center;\n justify-content: center;\n background-color: #0f1715; /* OpenAI's green color */\n border-radius: 50%; /* This creates the circular background */\n}\n\n.openai-icon {\n width: 54px;\n height: 54px;\n fill: #ffffff; /* White color for the SVG */\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\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 .openai-logo {\n animation: spin 5s linear infinite;\n width: 50px;\n height: 50px;\n top: 28%;\n}\n\n.brutalist-button:hover .openai-icon {\n transform: scale(0.6);\n}\n\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.brutalist-button.openai:hover .button-text {\n color: #d3d3d3;\n}\n\n.brutalist-button.openai:hover .button-text span:last-child {\n color: #d6cbbf;\n}\n\n@media (hover: hover) and (pointer: fine) {\n .brutalist-button:hover {\n transform: translate(-4px, -4px);\n box-shadow: 8px 8px 0px #000000;\n }\n}\n"}

quiet-dog-6

👁 实时预览

📝 源代码

🔗 相关联的样式