{"html":"","css":".btn {\n position: relative;\n outline: 0;\n border: 1px solid transparent;\n background-color: #488aec;\n color: #ffffff;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 700;\n text-transform: uppercase;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n overflow: hidden;\n box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;\n}\n\n.btn span {\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n transition: all .4s ease;\n}\n\nbutton svg {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.btn span:nth-child(2),.btn span:nth-child(3) {\n position: absolute;\n top: 40px;\n color: #fff;\n}\n\n.btn span:nth-child(2) {\n background-color: #488aec;\n}\n\n.btn span:nth-child(3) {\n background-color: #488aec;\n}\n\n.btn:hover {\n box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;\n}\n\n.btn:hover span:nth-child(2), .btn:focus span:nth-child(3) {\n top: 0;\n}\n\n.btn:focus {\n box-shadow: none;\n}"}

swift-mayfly-12

👁 实时预览

📝 源代码