{"html":"

\n Keep hovering me \n Welcome to uiverse\n Keep going \n Create on uiverse \n Save favorite \n ...and enjoy! \n Respect us.\n and we will you. \n Happy coding. \n ...and thanks. \n uiverse.io \n

","css":".button {\n cursor: pointer;\n position: relative;\n text-align: center;\n display: block;\n width: 200px;\n border: none;\n font-size: 12px;\n height: 45px;\n text-decoration: none;\n font-weight: 600;\n overflow: hidden;\n box-shadow: 0 10px 50px #006eff;\n border-radius: 10px;\n padding: 10px 20px;\n}\n\n.button .ten {\n line-height: 52px;\n}\n\n.button:hover .slidein {\n left: 0%;\n}\n\n.button:hover .two {\n left: 0%;\n transition-delay: 1.5s;\n}\n\n.button:hover .three {\n left: 0%;\n transition-delay: 3s;\n}\n\n.button:hover .four {\n left: 0%;\n transition-delay: 4.5s;\n}\n\n.button:hover .five {\n left: 0%;\n transition-delay: 6s;\n}\n\n.button:hover .six {\n left: 0%;\n transition-delay: 7.5s;\n}\n\n.button:hover .seven {\n left: 0%;\n transition-delay: 9s;\n}\n\n.button:hover .eight {\n left: 0%;\n transition-delay: 10.5s;\n}\n\n.button:hover .nine {\n left: 0%;\n transition-delay: 12s;\n}\n\n.button:hover .ten {\n left: 0%;\n transition-delay: 14s;\n}\n\n.button .slidein {\n background: #3398ff;\n left: -100%;\n z-index: 2;\n}\n\n.button a {\n text-transform: uppercase;\n transition: left 300ms;\n display: flex;\n align-items: center;\n justify-content: center;\n letter-spacing: 1px;\n background: #006eff;\n position: absolute;\n font-weight: bold;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n color: #fff;\n}\n\n.slidein:nth-child( even) {\n background: #348bfc !important;\n}\n\n.slidein:nth-child( odd) {\n background: #0873ff !important;\n}"}

soft-moose-34

👁 实时预览

📝 源代码