{"html":"\n","css":".button {\n --h-button: 48px;\n --w-button: 102px;\n --round: 0.75rem;\n cursor: pointer;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition: all 0.25s ease;\n background: radial-gradient(\n 65.28% 65.28% at 50% 100%,\n rgba(223, 113, 255, 0.8) 0%,\n rgba(223, 113, 255, 0) 100%\n ),\n linear-gradient(0deg, #7a5af8, #7a5af8);\n border-radius: var(--round);\n border: none;\n outline: none;\n padding: 12px 18px;\n}\n.button::before,\n.button::after {\n content: \"\";\n position: absolute;\n inset: var(--space);\n transition: all 0.5s ease-in-out;\n border-radius: calc(var(--round) - var(--space));\n z-index: 0;\n}\n.button::before {\n --space: 1px;\n background: linear-gradient(\n 177.95deg,\n rgba(255, 255, 255, 0.19) 0%,\n rgba(255, 255, 255, 0) 100%\n );\n}\n.button::after {\n --space: 2px;\n background: radial-gradient(\n 65.28% 65.28% at 50% 100%,\n rgba(223, 113, 255, 0.8) 0%,\n rgba(223, 113, 255, 0) 100%\n ),\n linear-gradient(0deg, #7a5af8, #7a5af8);\n}\n.button:active {\n transform: scale(0.95);\n}\n\n.fold {\n z-index: 1;\n position: absolute;\n top: 0;\n right: 0;\n height: 1rem;\n width: 1rem;\n display: inline-block;\n transition: all 0.5s ease-in-out;\n background: radial-gradient(\n 100% 75% at 55%,\n rgba(223, 113, 255, 0.8) 0%,\n rgba(223, 113, 255, 0) 100%\n );\n box-shadow: 0 0 3px black;\n border-bottom-left-radius: 0.5rem;\n border-top-right-radius: var(--round);\n}\n.fold::after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n width: 150%;\n height: 150%;\n transform: rotate(45deg) translateX(0%) translateY(-18px);\n background-color: #e8e8e8;\n pointer-events: none;\n}\n.button:hover .fold {\n margin-top: -1rem;\n margin-right: -1rem;\n}\n\n.points_wrapper {\n overflow: hidden;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n z-index: 1;\n}\n\n.points_wrapper .point {\n bottom: -10px;\n position: absolute;\n animation: floating-points infinite ease-in-out;\n pointer-events: none;\n width: 2px;\n height: 2px;\n background-color: #fff;\n border-radius: 9999px;\n}\n@keyframes floating-points {\n 0% {\n transform: translateY(0);\n }\n 85% {\n opacity: 0;\n }\n 100% {\n transform: translateY(-55px);\n opacity: 0;\n }\n}\n.points_wrapper .point:nth-child(1) {\n left: 10%;\n opacity: 1;\n animation-duration: 2.35s;\n animation-delay: 0.2s;\n}\n.points_wrapper .point:nth-child(2) {\n left: 30%;\n opacity: 0.7;\n animation-duration: 2.5s;\n animation-delay: 0.5s;\n}\n.points_wrapper .point:nth-child(3) {\n left: 25%;\n opacity: 0.8;\n animation-duration: 2.2s;\n animation-delay: 0.1s;\n}\n.points_wrapper .point:nth-child(4) {\n left: 44%;\n opacity: 0.6;\n animation-duration: 2.05s;\n}\n.points_wrapper .point:nth-child(5) {\n left: 50%;\n opacity: 1;\n animation-duration: 1.9s;\n}\n.points_wrapper .point:nth-child(6) {\n left: 75%;\n opacity: 0.5;\n animation-duration: 1.5s;\n animation-delay: 1.5s;\n}\n.points_wrapper .point:nth-child(7) {\n left: 88%;\n opacity: 0.9;\n animation-duration: 2.2s;\n animation-delay: 0.2s;\n}\n.points_wrapper .point:nth-child(8) {\n left: 58%;\n opacity: 0.8;\n animation-duration: 2.25s;\n animation-delay: 0.2s;\n}\n.points_wrapper .point:nth-child(9) {\n left: 98%;\n opacity: 0.6;\n animation-duration: 2.6s;\n animation-delay: 0.1s;\n}\n.points_wrapper .point:nth-child(10) {\n left: 65%;\n opacity: 1;\n animation-duration: 2.5s;\n animation-delay: 0.2s;\n}\n\n.inner {\n z-index: 2;\n gap: 6px;\n position: relative;\n width: 100%;\n color: white;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n font-weight: 500;\n line-height: 1.5;\n transition: color 0.2s ease-in-out;\n}\n\n.inner svg.icon {\n width: 18px;\n height: 18px;\n transition: fill 0.1s linear;\n}\n\n.button:focus svg.icon {\n fill: white;\n}\n.button:hover svg.icon {\n fill: transparent;\n animation:\n dasharray 1s linear forwards,\n filled 0.1s linear forwards 0.95s;\n}\n@keyframes dasharray {\n from {\n stroke-dasharray: 0 0 0 0;\n }\n to {\n stroke-dasharray: 68 68 0 0;\n }\n}\n@keyframes filled {\n to {\n fill: white;\n }\n}\n"}

foolish-shrimp-59

👁 实时预览

📝 源代码