{"html":"\n","css":".button {\n --white: #ffe7ff;\n --bg: #080808;\n --radius: 100px;\n outline: none;\n cursor: pointer;\n border: 0;\n position: relative;\n border-radius: var(--radius);\n background-color: var(--bg);\n transition: all 0.2s ease;\n box-shadow:\n inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),\n inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),\n inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),\n 0 3rem 3rem rgba(0, 0, 0, 0.3),\n 0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8);\n}\n.button .wrap {\n font-size: 25px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.7);\n padding: 32px 45px;\n border-radius: inherit;\n position: relative;\n overflow: hidden;\n}\n.button .wrap p span:nth-child(2) {\n display: none;\n}\n.button:hover .wrap p span:nth-child(1) {\n display: none;\n}\n.button:hover .wrap p span:nth-child(2) {\n display: inline-block;\n}\n.button .wrap p {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0;\n transition: all 0.2s ease;\n transform: translateY(2%);\n mask-image: linear-gradient(to bottom, white 40%, transparent);\n}\n.button .wrap::before,\n.button .wrap::after {\n content: \"\";\n position: absolute;\n transition: all 0.3s ease;\n}\n.button .wrap::before {\n left: -15%;\n right: -15%;\n bottom: 25%;\n top: -100%;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.12);\n}\n.button .wrap::after {\n left: 6%;\n right: 6%;\n top: 12%;\n bottom: 40%;\n border-radius: 22px 22px 0 0;\n box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.3) 0%,\n rgba(0, 0, 0, 0) 50%,\n rgba(0, 0, 0, 0) 100%\n );\n}\n.button:hover {\n box-shadow:\n inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),\n inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),\n inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),\n 0 3rem 3rem rgba(0, 0, 0, 0.3),\n 0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8);\n}\n.button:hover .wrap::before {\n transform: translateY(-5%);\n}\n.button:hover .wrap::after {\n opacity: 0.4;\n transform: translateY(5%);\n}\n.button:hover .wrap p {\n transform: translateY(-4%);\n}\n.button:active {\n transform: translateY(4px);\n box-shadow:\n inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),\n inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8),\n inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.4),\n 0 3rem 3rem rgba(0, 0, 0, 0.3),\n 0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8);\n}\n"}

pretty-goose-7

👁 实时预览

📝 源代码