{"html":"

\n \n

Click to see what happens

\n","css":"button {\n background-color: #f2f7fa;\n width: 100px;\n height: 30px;\n border: none;\n border-radius: 10px;\n font-weight: 600;\n cursor: pointer;\n overflow: hidden;\n transition-duration: 700ms;\n}\n\nbutton span:first-child {\n color: #0e418f;\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\nbutton span:last-child {\n position: absolute;\n color: #b5ccf3;\n opacity: 0;\n transform: translateY(100%) translateX(-50%);\n height: 14px;\n line-height: 13px;\n}\n\nbutton:focus {\n background-color: #0e418f;\n width: 120px;\n height: 40px;\n transition-delay: 100ms;\n transition-duration: 500ms;\n}\n\nbutton:focus span:first-child {\n color: #b5ccf3;\n transform: translateX(-50%) translateY(-150%);\n opacity: 0;\n transition-duration: 500ms;\n}\n\nbutton:focus span:last-child {\n transform: translateX(-50%) translateY(-50%);\n opacity: 1;\n transition-delay: 300ms;\n transition-duration: 500ms;\n}\n\nbutton:focus:end {\n background-color: #ffffff;\n width: 120px;\n height: 40px;\n transition-duration: 900ms;\n}\n\n.centralize {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n.description {\n margin-top: 10px;\n color: #b5ccf3;\n}\n"}

shy-termite-9

👁 实时预览

📝 源代码