{"html":"","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 100%;\n border-radius: 36px;\n font-weight: 700;\n height: 54px;\n font-size: 16px;\n padding-inline: 20px;\n background-color: transparent;\n color: #fff;\n text-transform: uppercase;\n overflow: hidden;\n text-align: center;\n transition: all .25s ease-in-out;\n z-index: 1;\n border: none;\n}\n\n.button:is(:hover, :focus)::before {\n transform: translateX(0%);\n}\n\n.text {\n white-space: nowrap;\n line-height: 1.2;\n padding-inline-end: 44px;\n z-index: 2;\n}\n\n/* change the width and height to 100% when you use it in your layout */\n.button::after {\n content: '';\n position: absolute;\n height: calc(100% - 2px);\n width: calc(100% - 2px);\n border: 1px solid #FFB400;\n border-radius: 36px;\n z-index: 2;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 100%;\n background-color: #FFB400;\n z-index: 1;\n left: -2px;\n transform: translateX(90%);\n transition: all .3s ease-out;\n}\n\n.icon {\n display: inherit;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 0;\n width: 54px;\n height: 54px;\n justify-content: center;\n align-items: center;\n border-radius: 100%;\n background-color: #FFB400;\n z-index: 2;\n}\n\n"}

breezy-horse-95

👁 实时预览

📝 源代码