{"html":"\n","css":"/* Container styling */\n.join-button {\n --h-button: 44px;\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(11, 1, 14, 0.8) 0%,\n rgba(223, 113, 255, 0) 100%\n ),\n linear-gradient(0deg, #6f50ec, #491cff);\n border-radius: var(--round);\n border: none;\n outline: none;\n padding: 10px 20px;\n height: var(--h-button);\n}\n\n/* Border effects */\n.join-button::before,\n.join-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\n.join-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\n.join-button::after {\n --space: 2px;\n background: radial-gradient(\n 65.28% 65.28% at 50% 100%,\n rgba(5, 0, 7, 0.8) 0%,\n rgba(223, 113, 255, 0) 100%\n ),\n linear-gradient(0deg, #7a5af8, #401ec7);\n}\n\n.join-button:active {\n transform: scale(0.95);\n}\n\n/* Folding corner effect */\n.join-button .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(29, 117, 218, 0.8) 0%,\n rgba(223, 113, 255, 0) 100%\n );\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n border-bottom-left-radius: 0.5rem;\n border-top-right-radius: var(--round);\n}\n\n.join-button .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\n.join-button:hover .fold {\n margin-top: -1rem;\n margin-right: -1rem;\n}\n\n/* Floating points animation */\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-btn infinite ease-in-out;\n pointer-events: none;\n width: 2px;\n height: 2px;\n background-color: #fff;\n border-radius: 9999px;\n}\n\n@keyframes floating-points-btn {\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\n.points_wrapper .point:nth-child(1) {\n left: 10%;\n animation-duration: 2.35s;\n animation-delay: 0.2s;\n}\n.points_wrapper .point:nth-child(2) {\n left: 30%;\n animation-duration: 2.5s;\n animation-delay: 0.5s;\n opacity: 0.7;\n}\n.points_wrapper .point:nth-child(3) {\n left: 25%;\n animation-duration: 2.2s;\n animation-delay: 0.1s;\n opacity: 0.8;\n}\n.points_wrapper .point:nth-child(4) {\n left: 44%;\n animation-duration: 2.05s;\n opacity: 0.6;\n}\n.points_wrapper .point:nth-child(5) {\n left: 50%;\n animation-duration: 1.9s;\n}\n.points_wrapper .point:nth-child(6) {\n left: 75%;\n animation-duration: 1.5s;\n animation-delay: 1.5s;\n opacity: 0.5;\n}\n.points_wrapper .point:nth-child(7) {\n left: 88%;\n animation-duration: 2.2s;\n animation-delay: 0.2s;\n opacity: 0.9;\n}\n.points_wrapper .point:nth-child(8) {\n left: 58%;\n animation-duration: 2.25s;\n animation-delay: 0.2s;\n opacity: 0.8;\n}\n.points_wrapper .point:nth-child(9) {\n left: 98%;\n animation-duration: 2.6s;\n animation-delay: 0.1s;\n opacity: 0.6;\n}\n.points_wrapper .point:nth-child(10) {\n left: 65%;\n animation-duration: 2.5s;\n animation-delay: 0.2s;\n}\n\n/* Inner content and icon */\n.inner-btn {\n z-index: 2;\n gap: 8px;\n position: relative;\n width: 100%;\n color: white;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.5;\n font-family: \"Inter\", sans-serif;\n}\n\n.inner-btn svg.icon {\n width: 18px;\n height: 18px;\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.join-button:hover svg.icon {\n transform: scale(1.3) rotate(15deg);\n filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));\n}\n"}

tame-lionfish-65

👁 实时预览

📝 源代码