{"html":"\n","css":".Btn-container {\n width: fit-content;\n height: fit-content;\n border: none;\n background-color: #ebebeb;\n padding: 10px;\n border-radius: 10px;\n box-shadow: 0px 2px 5px #e1e1e1;\n transition: 0.2s;\n}\n.inner-wrapper {\n width: fit-content;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f7f7f7;\n border-radius: 5px;\n padding: 8px 15px;\n box-shadow: 0px 4px 10px #d3d3d3;\n gap: 50px;\n transition: 0.2s;\n}\n.text {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n}\n.text p {\n font-size: 1.2em;\n font-weight: 600;\n color: rgb(140, 140, 140);\n}\n.text .pro {\n background-color: black;\n color: white;\n padding: 4px 8px;\n border-radius: 5px;\n}\n.icon {\n width: 40px;\n height: 40px;\n background-color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: rotate(45deg);\n transition: 0.2s;\n}\n.icon svg {\n width: 15px;\n}\n.Btn-container:active {\n transform: scale(1);\n}\n.Btn-container:active .inner-wrapper {\n transform: scale(0.97);\n}\n.Btn-container:hover .icon {\n transform: rotate(0deg);\n}\n"}

strange-penguin-42

👁 实时预览

📝 源代码