{"html":"\n","css":".Social-Btn {\n width: 4.5em;\n height: 2.5em;\n align-items: baseline;\n justify-content: center;\n border: none;\n\n /* overflow: hidden; */\n border-radius: 7px;\n cursor: pointer;\n transition: all 0.3s;\n fill: white !important;\n position: relative;\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 color: white;\n background: rgba(83, 69, 69, 0.562);\n}\n\n.svgContainer > svg {\n width: 1.5rem;\n}\n\n.BG {\n position: absolute;\n top: 0;\n left: 0;\n content: \"\";\n width: 100%;\n height: 100%;\n z-index: -1;\n border-radius: 10px;\n pointer-events: none;\n transition: all 2s;\n\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n color: transparent;\n filter: blur(4px);\n z-index: 4;\n}\n.BG::before {\n position: absolute;\n content: \"\";\n height: 0.6em;\n width: 0.6em;\n bottom: -0.2em;\n left: 50%;\n transform: translate(-50%) rotate(45deg);\n background: white;\n opacity: -1;\n z-index: -10;\n transition: 5s all;\n}\n.Social-Btn:hover .BG::before {\n opacity: 1;\n}\n.Social-Btn:hover .BG {\n transform: translateY(-130%);\n transform-origin: bottom;\n background: white;\n color: black;\n filter: blur(0px);\n}\n\n.Social-Btn:hover .svgContainer {\n z-index: 20;\n background-color: rgba(156, 156, 156, 0.466);\n filter: blur(0px);\n fill: black;\n}\n"}

smart-kangaroo-41

👁 实时预览

📝 源代码