{"html":"\n","css":".styled-button {\n position: relative;\n padding: 1rem 2rem;\n font-size: 1.1rem;\n font-weight: bold;\n color: #ffffff;\n background: linear-gradient(to bottom, #171717, #242424);\n border-radius: 9999px;\n cursor: pointer;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 10px 20px rgba(0, 0, 0, 0.4);\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid #292929;\n}\n\n.styled-button::before {\n content: \"\";\n position: absolute;\n top: -2px;\n right: -1px;\n bottom: -1px;\n left: -1px;\n background: linear-gradient(to bottom, #292929, #000000);\n z-index: -1;\n border-radius: 9999px;\n transition: all 0.2s ease;\n opacity: 1;\n}\n\n.styled-button:active {\n transform: translateY(2px);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 5px 10px rgba(0, 0, 0, 0.4);\n}\n\n.styled-button .inner-button {\n position: relative; /* Ensure relative positioning for pseudo-element */\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(to bottom, #171717, #242424);\n width: 40px;\n height: 40px;\n margin-left: 10px;\n border-radius: 50%;\n box-shadow: 0 0 1px rgba(0, 0, 0, 1);\n border: 1px solid #252525;\n transition: all 0.2s ease;\n}\n\n.styled-button .inner-button::before {\n content: \"\";\n position: absolute;\n top: -2px;\n right: -1px;\n bottom: -1px;\n left: -1px;\n background: linear-gradient(to bottom, #292929, #000000);\n z-index: -1;\n border-radius: 9999px;\n transition: all 0.2s ease;\n opacity: 1;\n}\n.styled-button .inner-button .icon {\n filter: drop-shadow(0 10px 20px rgba(26, 25, 25, 0.9))\n drop-shadow(0 0 4px rgba(0, 0, 0, 1));\n transition: all 0.4s ease-in-out;\n}\n.styled-button .inner-button .icon:hover {\n filter: drop-shadow(0 10px 20px rgba(50, 50, 50, 1))\n drop-shadow(0 0 20px rgba(2, 2, 2, 1));\n transform: rotate(-35deg);\n}\n"}

hard-turkey-58

👁 实时预览

📝 源代码