{"html":"","css":".btn {\n position: relative;\n display: flex;\n overflow: hidden;\n cursor: pointer;\n width: 150px;\n height: 50px;\n background-color: #eeeeed;\n border-radius: 80px;\n border: none;\n padding: 0 80px;\n transition: all .2s ease;\n justify-content: center;\n align-items: center;\n}\n\n.btn:hover {\n transform: scale(1.1);\n}\n\n.btn span {\n position: absolute;\n z-index: 99;\n width: 150px;\n height: 50px;\n border-radius: 80px;\n font-family: 'Courier New', Courier, monospace;\n font-weight: 600;\n font-size: 17px;\n text-align: center;\n line-height: 50px;\n letter-spacing: 2px;\n color: #eeeeed;\n background-color: #1f1f1f;\n padding: 0 10px;\n transition: all 1.2s ease;\n}\n\n.btn .container {\n display: flex;\n width: 150px;\n border-radius: 80px;\n line-height: 50px;\n}\n\n.btn svg {\n padding: 0 5px;\n opacity: 0;\n}\n\n.btn .container svg:nth-of-type(1) {\n transition-delay: 0.65s;\n}\n\n.btn .container svg:nth-of-type(2) {\n transition-delay: 0.8s;\n}\n\n.container svg:nth-of-type(3) {\n transition-delay: 0.5s;\n}\n\n.btn:hover span {\n opacity: 0;\n}\n\n.btn:hover svg {\n opacity: 1;\n}"}

fat-pug-54

👁 实时预览

📝 源代码