{"html":"","css":".bookmarkBtn {\n width: 130px;\n height: 40px;\n border-radius: 40px;\n border: none;\n background-color: rgb(255, 255, 255);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition-duration: .3s;\n overflow: hidden;\n box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.062);\n}\n\n.IconContainer {\n width: 30px;\n height: 30px;\n background-color: rgb(103, 74, 228);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n z-index: 2;\n transition-duration: .3s;\n}\n\n.icon {\n border-radius: 1px;\n}\n\n.text {\n height: 100%;\n width: 90px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(26, 26, 26);\n z-index: 1;\n transition-duration: .3s;\n font-size: 1.04em;\n font-weight: 600;\n}\n\n.bookmarkBtn:hover .IconContainer {\n width: 120px;\n border-radius: 40px;\n transition-duration: .3s;\n}\n\n.bookmarkBtn:hover .text {\n transform: translate(10px);\n width: 0;\n font-size: 0;\n transition-duration: .3s;\n}\n\n.bookmarkBtn:active {\n transform: scale(0.95);\n transition-duration: .3s;\n}"}

chilly-kangaroo-37

👁 实时预览

📝 源代码