{"html":" ","css":".Btn {\n position: relative;\n width: 180px;\n height: 50px;\n border: none;\n background-color: #005f99;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 30px;\n cursor: pointer;\n box-shadow: 8px 8px 0px rgb(12, 12, 12);\n transition-duration: .3s;\n}\n\n.Layer {\n width: 60px;\n position: absolute;\n left: -30px;\n transition-duration: .3s;\n animation: spin 5s linear infinite;\n}\n\n.Btn:hover {\n transform: translateY(5px);\n box-shadow: 3px 3px 0px black;\n transition-duration: .3s;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.Btn:hover .Layer {\n left: 0%;\n width: 100%;\n transition-duration: .3s;\n}\n\n.text {\n color: white;\n font-weight: 600;\n font-size: 1.1em;\n position: absolute;\n z-index: 2;\n transition-duration: .1s;\n font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n}\n\n.Btn:hover .text {\n color: transparent;\n transition-duration: .3s;\n}\n/* svg colors */\n.cls-1 {\n fill: #242021;\n}\n\n.cls-2 {\n fill: #e82728;\n}\n\n.cls-3 {\n fill: #fefefe;\n}\n\n.cls-4 {\n fill: #e92728;\n}\n\n.cls-5 {\n fill: #005f99;\n}\n\n.cls-6 {\n fill: #fff;\n}\n/* svg colors */"}

proud-quail-59

👁 实时预览

📝 源代码