{"html":"

\n \n \n \n \n \n \n

\n \n

Widely available

Newly available

Limited availability

\n","css":".button {\n position: relative;\n align-items: center;\n border: none;\n background-color: #0000;\n /* The button is by default rather large on purpose, but for uiverse, make it a bit smaller */\n font-size: 0.75em;\n}\n.button input {\n display: none;\n}\n.button label {\n position: absolute;\n inset: 0;\n display: none;\n cursor: pointer;\n}\n.button #available:checked ~ [for=\"newly\"] {\n display: block;\n}\n.button #newly:checked ~ [for=\"limited\"] {\n display: block;\n}\n.button #limited:checked ~ [for=\"available\"] {\n display: block;\n}\n.button .container {\n display: flex;\n gap: 1em;\n padding: 2em;\n border-radius: 2em;\n transition: 0.5s all;\n background: #f0faff;\n}\n.button .text {\n display: flex;\n align-items: center;\n position: relative;\n transition: 0.5s all;\n pointer-events: none;\n width: 8.5em;\n font-size: 1.5em;\n}\n.button .text div {\n transition:\n 0.5s all,\n 0.5s translate;\n position: absolute;\n text-wrap: nowrap;\n translate: 0 -1.25em;\n opacity: 0;\n}\n.button #newly:checked ~ .container .text-na {\n opacity: 1;\n translate: 0 0em;\n}\n.button #newly:checked ~ .container .text-wa {\n translate: 0 1.25em;\n}\n.button #newly:checked ~ .container .text-l {\n transition: 0s all;\n}\n.button #available:checked ~ .container {\n background: #e8ffee;\n}\n.button #available:checked ~ .container .text-wa {\n opacity: 1;\n translate: 0 0em;\n}\n.button #available:checked ~ .container .text-l {\n translate: 0 1.25em;\n}\n.button #available:checked ~ .container .text-na {\n transition: 0s all;\n}\n.button #available:checked ~ .container svg .bg {\n --a: 5 0;\n stroke-dasharray: var(--a) var(--a) var(--a) var(--a) var(--a) var(--a)\n var(--a) var(--a) var(--a) var(--a) var(--a) var(--a) 3.75 2.5 0 5 3.75 0\n var(--a);\n stroke-dashoffset: 7.5;\n stroke: #c4eed0;\n}\n.button #available:checked ~ .container svg .fg {\n stroke: #1ea446;\n}\n.button #limited:checked ~ .container {\n background: #fff5e6;\n}\n.button #limited:checked ~ .container .text-l {\n opacity: 1;\n translate: 0 0em;\n}\n.button #limited:checked ~ .container .text-na {\n translate: 0 1.25em;\n}\n.button #limited:checked ~ .container .text-wa {\n transition: 0s all;\n}\n.button #limited:checked ~ .container svg .bg {\n --a: 5 0;\n stroke-dasharray: var(--a) var(--a) var(--a) var(--a) var(--a) var(--a)\n var(--a) var(--a) var(--a) var(--a) var(--a) var(--a) 3.75 2.5 0 5 3.75 0\n var(--a);\n stroke-dashoffset: 7.5;\n stroke: #c6c6c6;\n}\n.button #limited:checked ~ .container svg .fg {\n stroke: #f09409;\n}\n.button #limited:checked ~ .container svg .fg1 {\n stroke-dasharray: 0 30 20 80;\n stroke-dashoffset: 20;\n}\n.button #limited:checked ~ .container svg .fg2 {\n stroke-dasharray: 0 0 3 3 3 0;\n}\n.button svg {\n overflow: visible;\n height: 2em;\n}\n.button svg path {\n stroke-width: 6;\n fill: #0000;\n transition: 0.5s all;\n}\n.button svg .bg {\n stroke: #a8c7fa;\n stroke-dasharray: 2.5;\n stroke-dashoffset: 6.25;\n}\n.button svg .fg {\n stroke: #1b6ef3;\n}\n.button svg .fg1 {\n stroke-linecap: square;\n stroke-dasharray: 0 20 30 80;\n stroke-dashoffset: 20;\n}\n.button svg .fg2 {\n stroke-dasharray: 0 3;\n}\n"}

big-fox-39

👁 实时预览

📝 源代码