{"html":"","css":".button {\n text-decoration: none;\n line-height: 1;\n border-radius: 1.5rem;\n overflow: hidden;\n position: relative;\n box-shadow: 10px 10px 20px rgba(0,0,0,.05);\n background-color: #fff;\n color: #121212;\n border: none;\n cursor: pointer;\n}\n\n.button-decor {\n position: absolute;\n inset: 0;\n background-color: var(--clr);\n transform: translateX(-100%);\n transition: transform .3s;\n z-index: 0;\n}\n\n.button-content {\n display: flex;\n align-items: center;\n font-weight: 600;\n position: relative;\n overflow: hidden;\n}\n\n.button__icon {\n width: 48px;\n height: 40px;\n background-color: var(--clr);\n display: grid;\n place-items: center;\n}\n\n.button__text {\n display: inline-block;\n transition: color .2s;\n padding: 2px 1.5rem 2px;\n padding-left: .75rem;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 150px;\n}\n\n.button:hover .button__text {\n color: #fff;\n}\n\n.button:hover .button-decor {\n transform: translate(0);\n}"}

pretty-grasshopper-57

👁 实时预览

📝 源代码

🔗 相关联的样式