{"html":"\n","css":".social-card {\n height: fit-content;\n width: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n background: rgb(255, 255, 255);\n padding: 20px 25px;\n border-radius: 14px;\n}\n.Btn {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background-color: transparent;\n position: relative;\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.svgContainer {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n backdrop-filter: blur(0px);\n letter-spacing: 0.8px;\n border-radius: 10px;\n transition: all 0.3s;\n border: 1px solid rgba(156, 156, 156, 0.466);\n z-index: 2;\n}\n\n.BG {\n position: absolute;\n width: 100%;\n height: 100%;\n background: #181818;\n z-index: 1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 0.3s;\n font-size: 0px;\n}\n.github .BG {\n background: #181818;\n}\n.linkdin .BG {\n background: #0077b5;\n}\n.whatsapp .BG {\n background: #075e54;\n}\n.discord .BG {\n background: #7289da;\n}\n.Btn:hover .BG {\n transform: scale(1.5);\n /* transform-origin: bottom; */\n font-size: 20px;\n color: white;\n}\n\n.Btn:hover .svgContainer {\n border: 1px solid rgba(216, 216, 216, 0.466);\n background-color: rgba(209, 209, 209, 0.466);\n backdrop-filter: blur(4px);\n}\n"}

foolish-rattlesnake-100

👁 实时预览

📝 源代码