{"html":"

\n \n

\n","css":".button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.big-circle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n overflow: hidden;\n width: 110px;\n height: 110px;\n border-radius: 50%;\n border: 0px solid;\n background: rgb(255, 255, 255);\n background: linear-gradient(\n 0deg,\n rgb(182, 182, 182) 0%,\n rgba(0, 0, 0, 1) 100%\n );\n box-shadow: 0 2px 0 #cdd2da;\n cursor: pointer;\n transition: 50ms ease;\n}\n\n.border-circle {\n position: absolute;\n background: rgb(0, 0, 0);\n background: linear-gradient(\n 90deg,\n rgb(150, 150, 150) 0%,\n rgb(0, 0, 0) 50%,\n rgba(150, 150, 150, 1) 100%\n );\n width: 70px;\n height: 70px;\n border-radius: 50%;\n}\n\n.shadow {\n position: absolute;\n background: radial-gradient(\n circle,\n rgb(0, 0, 0) 0%,\n rgb(99, 99, 99) 40%,\n rgba(0, 0, 0, 0) 70%,\n rgba(0, 0, 0, 0) 100%\n );\n width: 150px;\n height: 150px;\n border-radius: 50%;\n bottom: -80px;\n opacity: 0.2;\n transition: 100ms ease;\n}\n\n.real-button {\n border: none;\n position: absolute;\n background-color: rgb(143, 238, 0);\n width: 70px;\n height: 70px;\n border-radius: 50%;\n cursor: pointer;\n transform: translateY(-8px);\n box-shadow: 0 9px 0 rgb(92, 165, 9);\n transition: 50ms ease;\n}\n\n.button:hover .real-button {\n box-shadow: 0 13px 0 rgb(92, 165, 9);\n translate: 0 -5px;\n}\n\n.button:active .real-button {\n background: rgba(184, 255, 74, 1);\n box-shadow: 0 0px 0 rgb(92, 165, 9);\n translate: 0 8px;\n filter: drop-shadow(0 0 5px rgba(184, 255, 74, 1));\n}\n\n.button:active .big-circle {\n background: rgb(255, 255, 255);\n background: linear-gradient(\n 0deg,\n rgb(182, 182, 182) 0%,\n rgb(26, 26, 26) 100%\n );\n box-shadow: 0 2px 0 #cdd2da;\n}\n\n.button:active .shadow {\n opacity: 0;\n}\n\n.width-border-circle {\n position: absolute;\n width: 110px;\n height: 114px;\n border-radius: 50%;\n background: rgb(0, 0, 0);\n background: linear-gradient(\n 90deg,\n rgb(49, 49, 49) 0%,\n rgb(150, 150, 150) 50%,\n rgb(49, 49, 49) 100%\n );\n z-index: -1;\n bottom: -10px;\n}\n"}

spicy-cobra-60

👁 实时预览

📝 源代码