{"html":"\n","css":".social-container {\n position: relative;\n perspective: 1000px;\n}\n\n.social-button {\n position: relative;\n width: 200px;\n height: 80px;\n background: linear-gradient(135deg, #ff3366, #ff6b35);\n border: 4px solid #000;\n box-shadow:\n 8px 8px 0 #000,\n 16px 16px 0 rgba(255, 51, 102, 0.3);\n cursor: pointer;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n transform-style: preserve-3d;\n}\n\n.social-button:hover {\n transform: translateZ(20px) rotateX(5deg) rotateY(-5deg);\n box-shadow:\n 12px 12px 0 #000,\n 24px 24px 0 rgba(255, 51, 102, 0.4),\n 0 0 50px rgba(255, 51, 102, 0.6);\n}\n\n.button-face {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: inherit;\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.button-text {\n color: #000;\n font-weight: 800;\n font-size: 16px;\n text-transform: uppercase;\n letter-spacing: 2px;\n text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3);\n transition: all 0.4s ease;\n}\n\n.social-button:hover .button-text {\n opacity: 0;\n transform: translateY(-30px) scale(0.8);\n}\n\n.icons-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-around;\n opacity: 0;\n transform: translateY(30px) scale(0.8);\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.social-button:hover .icons-container {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.social-icon {\n width: 32px;\n height: 32px;\n fill: #000;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n transform-origin: center;\n filter: drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.3));\n}\n\n.social-icon:nth-child(1) {\n animation-delay: 0.1s;\n}\n\n.social-icon:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.social-icon:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n.social-icon:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n.social-button:hover .social-icon {\n animation: iconPop 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;\n}\n\n.social-icon:hover {\n transform: scale(0) rotate(15deg);\n fill: #fff;\n filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));\n}\n\n@keyframes iconPop {\n 0% {\n transform: scale(0) rotate(-180deg);\n opacity: 0;\n }\n 50% {\n transform: scale(1.2) rotate(-90deg);\n }\n 100% {\n transform: scale(1) rotate(0deg);\n opacity: 1;\n }\n}\n\n/* Glitch effect overlay */\n.social-button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.4),\n transparent\n );\n transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.social-button:hover::before {\n left: 100%;\n}\n\n/* Brutalist geometric accent */\n.social-button::after {\n content: \"\";\n position: absolute;\n top: -4px;\n right: -4px;\n width: 20px;\n height: 20px;\n background: #000;\n clip-path: polygon(0 0, 100% 0, 100% 100%);\n border: 1px;\n transition: all 0.6s ease;\n}\n\n.social-button:hover::after {\n transform: scale(1) rotate(deg);\n background: rgb(246, 168, 116);\n}\n\n/* Pulse effect on container */\n.social-container::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: rgba(255, 51, 102, 0.1);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n z-index: -1;\n}\n\n.social-button:hover ~ .social-container::before,\n.social-container:hover::before {\n width: 400px;\n height: 400px;\n}\n"}

young-wolverine-100

👁 实时预览

📝 源代码