{"html":" ","css":"button {\n background-color: #fff;\n position: relative;\n list-style: none;\n width: 60px;\n height: 60px;\n border-radius: 60px;\n cursor: pointer;\n box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.5s;\n border: none;\n}\n\nbutton:active {\n scale: 1.2;\n}\n\nbutton:hover {\n width: 180px;\n box-shadow: 0px 10px 25px rgba(0, 0, 0, 0);\n}\n\nbutton::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 50px;\n background: linear-gradient(45deg, var(--i), var(--j));\n opacity: 0;\n transition: 0.5s;\n}\n\nbutton:hover::before {\n opacity: 1;\n}\n\nbutton::after {\n content: '';\n position: absolute;\n top: 10px;\n width: 100%;\n height: 100%;\n border-radius: 60px;\n background: linear-gradient(45deg, var(--i), var(--j));\n filter: blur(15px);\n transition: 0.5s;\n z-index: -1;\n opacity: 0;\n}\n\nbutton:hover::after {\n opacity: 0.5;\n}\n\nbutton svg {\n color: #777;\n width: auto;\n height: 30px;\n transition: 0.5s;\n transition-delay: 0.25s;\n}\n\nbutton:hover svg {\n transform: scale(0);\n color: #fff;\n transition-delay: 0s;\n}\n\nbutton span {\n position: absolute;\n}\n\nbutton .title {\n color: #fff;\n font-size: 1.3em;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n transform: scale(0);\n transition: 0.5s;\n transition-delay: 0s;\n font-weight: 600;\n}\n\nbutton:hover .title {\n transform: scale(1);\n transition-delay: 0.25s;\n}"}

tender-cobra-44

👁 实时预览

📝 源代码