Marquee Pill Button

[{"id":"1f794ff1-97e4-4425-acad-cf9a33692930","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6bef28b2-b0eb-44c1-9f69-d1088f551c42","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.btn-23,\\n.btn-23 *,\\n.btn-23::after,\\n.btn-23::before {\\n border: 0 solid;\\n box-sizing: border-box;\\n}\\n\\n.btn-23 {\\n -webkit-tap-highlight-color: transparent;\\n -webkit-appearance: button;\\n\\n position: relative;\\n overflow: hidden;\\n\\n margin: 0;\\n padding: 0.8rem 3rem;\\n\\n border-width: 2px;\\n border-radius: 99rem;\\n\\n background-color: #000;\\n background-image: none;\\n color: #fff;\\n\\n cursor: pointer;\\n\\n font-family:\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n Roboto,\\n \\\"Helvetica Neue\\\",\\n Arial,\\n \\\"Noto Sans\\\",\\n sans-serif,\\n \\\"Apple Color Emoji\\\",\\n \\\"Segoe UI Emoji\\\",\\n \\\"Segoe UI Symbol\\\",\\n \\\"Noto Color Emoji\\\";\\n\\n font-size: 100%;\\n font-weight: 900;\\n line-height: 1.5;\\n text-transform: uppercase;\\n\\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\\n}\\n\\n.btn-23:disabled {\\n cursor: default;\\n}\\n\\n.btn-23:-moz-focusring {\\n outline: auto;\\n}\\n\\n.btn-23 svg {\\n display: block;\\n vertical-align: middle;\\n}\\n\\n.btn-23 [hidden] {\\n display: none;\\n}\\n\\n.btn-23 span {\\n position: absolute;\\n inset: 0;\\n\\n display: grid;\\n place-items: center;\\n\\n transition: opacity 0.2s ease;\\n}\\n\\n.btn-23 .text {\\n opacity: 1;\\n}\\n\\n.btn-23 .marquee {\\n --spacing: 5em;\\n --start: 0em;\\n --end: 5em;\\n\\n position: relative;\\n\\n animation: marquee 1s linear infinite;\\n animation-play-state: paused;\\n\\n opacity: 0;\\n\\n text-shadow:\\n #fff var(--spacing) 0,\\n #fff calc(var(--spacing) * -1) 0,\\n #fff calc(var(--spacing) * -2) 0;\\n}\\n\\n.btn-23:hover .marquee {\\n animation-play-state: running;\\n opacity: 1;\\n}\\n\\n.btn-23:hover .text {\\n opacity: 0;\\n}\\n\\n@keyframes marquee {\\n 0% {\\n transform: translateX(var(--start));\\n }\\n\\n 100% {\\n transform: translateX(var(--end));\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Marquee Pill Button\\n \\n \\n \\n

\\n \\n

\\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"162457f1-0c37-47b8-89ba-5942207b3606","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"39c21565-1dc4-47d6-a0a3-3f4e99b3a776","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"10cde0ca-5d20-4d08-a31c-1e00a877ef0d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"894110b0-7bea-4e70-953d-4931de351f52","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"35404615-ee31-4628-97dc-ba7a3be998f4","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.btn-23,\\n.btn-23 *,\\n.btn-23::after,\\n.btn-23::before {\\n border: 0 solid;\\n box-sizing: border-box;\\n}\\n\\n.btn-23 {\\n -webkit-tap-highlight-color: transparent;\\n -webkit-appearance: button;\\n\\n position: relative;\\n overflow: hidden;\\n\\n margin: 0;\\n padding: 0.8rem 3rem;\\n\\n border-width: 2px;\\n border-radius: 99rem;\\n\\n background-color: #000;\\n background-image: none;\\n color: #fff;\\n\\n cursor: pointer;\\n\\n font-family:\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n Roboto,\\n \\\"Helvetica Neue\\\",\\n Arial,\\n \\\"Noto Sans\\\",\\n sans-serif,\\n \\\"Apple Color Emoji\\\",\\n \\\"Segoe UI Emoji\\\",\\n \\\"Segoe UI Symbol\\\",\\n \\\"Noto Color Emoji\\\";\\n\\n font-size: 100%;\\n font-weight: 900;\\n line-height: 1.5;\\n text-transform: uppercase;\\n\\n -webkit-mask-image: -webkit-radial-gradient(#000, #fff);\\n}\\n\\n.btn-23:disabled {\\n cursor: default;\\n}\\n\\n.btn-23:-moz-focusring {\\n outline: auto;\\n}\\n\\n.btn-23 svg {\\n display: block;\\n vertical-align: middle;\\n}\\n\\n.btn-23 [hidden] {\\n display: none;\\n}\\n\\n.btn-23 span {\\n position: absolute;\\n inset: 0;\\n\\n display: grid;\\n place-items: center;\\n\\n transition: opacity 0.2s ease;\\n}\\n\\n.btn-23 .text {\\n opacity: 1;\\n}\\n\\n.btn-23 .marquee {\\n --spacing: 5em;\\n --start: 0em;\\n --end: 5em;\\n\\n position: relative;\\n\\n animation: marquee 1s linear infinite;\\n animation-play-state: paused;\\n\\n opacity: 0;\\n\\n text-shadow:\\n #fff var(--spacing) 0,\\n #fff calc(var(--spacing) * -1) 0,\\n #fff calc(var(--spacing) * -2) 0;\\n}\\n\\n.btn-23:hover .marquee {\\n animation-play-state: running;\\n opacity: 1;\\n}\\n\\n.btn-23:hover .text {\\n opacity: 0;\\n}\\n\\n@keyframes marquee {\\n 0% {\\n transform: translateX(var(--start));\\n }\\n\\n 100% {\\n transform: translateX(var(--end));\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b13abfa1-bfe3-4221-877d-6e7fd0ed4939","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"be14915a-9867-44e6-9dbc-1082b5276d30","type":"divider","props":{},"children":[]},{"id":"c93fd0b1-b531-4433-a5e9-d4fca34baf9c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"a20ea1fd-c72d-4c8c-8888-be74f6426eef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Structure","styles":{}}],"children":[]},{"id":"8aeacfb8-bf22-4f61-be29-452621c54f45","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"858i5dnil\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c92541b7-69ed-4e4f-81e3-5d0128935583","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button has two text layers.","styles":{}}],"children":[]},{"id":"45b2e29d-24cb-482b-9116-e569b366c773","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".text","styles":{"code":true}},{"type":"text","text":" span is the default visible text.\n\nThe ","styles":{}},{"type":"text","text":".marquee","styles":{"code":true}},{"type":"text","text":" span is the animated hover text.","styles":{}}],"children":[]},{"id":"5556f682-2f76-4e26-884f-0c4b073e1575","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"aria-hidden=\"true\"","styles":{"code":true}},{"type":"text","text":" is used on the marquee text because it is only visual. Screen readers should read the main button text once, not duplicate it.","styles":{}}],"children":[]},{"id":"34359ed4-5fc4-4826-8953-236c3033e4de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base","styles":{}}],"children":[]},{"id":"d1940ce3-8c2d-40cc-8444-36e6f82b6044","type":"procode","props":{"code":".btn-23 {\n position: relative;\n overflow: hidden;\n padding: 0.8rem 3rem;\n border-radius: 99rem;\n background-color: #000;\n color: #fff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"amdl82ghx\",\"name\":\"code\",\"code\":\".btn-23 {\\n position: relative;\\n overflow: hidden;\\n padding: 0.8rem 3rem;\\n border-radius: 99rem;\\n background-color: #000;\\n color: #fff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0ba3a755-3c93-4628-bf40-396d7adf1ed7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" so the two text layers can be positioned inside it.\n\n","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps the moving text clipped inside the pill shape.\n\n","styles":{}},{"type":"text","text":"border-radius: 99rem","styles":{"code":true}},{"type":"text","text":" makes the button fully rounded.","styles":{}}],"children":[]},{"id":"1f446514-0128-4601-9775-0d6bd525b790","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer Setup","styles":{}}],"children":[]},{"id":"de04ea09-1b89-4d9a-b390-e81ded88504a","type":"procode","props":{"code":".btn-23 span {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rhcnk9683\",\"name\":\"code\",\"code\":\".btn-23 span {\\n position: absolute;\\n inset: 0;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ea3e6645-c534-41a0-a0e5-310bc01bcc04","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Both text layers are stacked in the same position.\n\n","styles":{}},{"type":"text","text":"inset: 0","styles":{"code":true}},{"type":"text","text":" makes each span fill the full button.\n\n","styles":{}},{"type":"text","text":"place-items: center","styles":{"code":true}},{"type":"text","text":" keeps the text centered.","styles":{}}],"children":[]},{"id":"60775348-2b2c-4931-8281-fc31aeb31a2a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Text","styles":{}}],"children":[]},{"id":"41e99fbe-1545-4f0b-b1be-f1736cb489be","type":"procode","props":{"code":".btn-23 .text {\n opacity: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"u66uumekt\",\"name\":\"code\",\"code\":\".btn-23 .text {\\n opacity: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ffb1f689-bc7e-472d-8cf7-d042299ad3bd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The normal text is visible by default.","styles":{}}],"children":[]},{"id":"742db2f6-a2ff-432e-98b3-0279c8e41aba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Marquee Text","styles":{}}],"children":[]},{"id":"6ce28e7f-f657-4df9-b6af-3a1b3bf501ba","type":"procode","props":{"code":".btn-23 .marquee {\n --spacing: 5em;\n --start: 0em;\n --end: 5em;\n\n animation: marquee 1s linear infinite;\n animation-play-state: paused;\n\n opacity: 0;\n\n text-shadow:\n #fff var(--spacing) 0,\n #fff calc(var(--spacing) * -1) 0,\n #fff calc(var(--spacing) * -2) 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"cdrd93p6y\",\"name\":\"code\",\"code\":\".btn-23 .marquee {\\n --spacing: 5em;\\n --start: 0em;\\n --end: 5em;\\n\\n animation: marquee 1s linear infinite;\\n animation-play-state: paused;\\n\\n opacity: 0;\\n\\n text-shadow:\\n #fff var(--spacing) 0,\\n #fff calc(var(--spacing) * -1) 0,\\n #fff calc(var(--spacing) * -2) 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d1a341c-4040-4828-b1ed-c99884b9357a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The marquee text is hidden by default with ","styles":{}},{"type":"text","text":"opacity: 0","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"367c9215-cc2a-45cc-bbf9-9d25677ff323","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The repeated text effect is created using ","styles":{}},{"type":"text","text":"text-shadow","styles":{"code":true}},{"type":"text","text":". Instead of adding extra HTML text, the same word is visually duplicated to the left and right.","styles":{}}],"children":[]},{"id":"469ac79f-e18b-4eca-a043-bbeb3a6d1d14","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow","styles":{}}],"children":[]},{"id":"4040b55e-4d62-4458-90d1-c62054a93c18","type":"procode","props":{"code":".btn-23:hover .marquee {\n animation-play-state: running;\n opacity: 1;\n}\n\n.btn-23:hover .text {\n opacity: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jpu6bn9um\",\"name\":\"code\",\"code\":\".btn-23:hover .marquee {\\n animation-play-state: running;\\n opacity: 1;\\n}\\n\\n.btn-23:hover .text {\\n opacity: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd098527-16ea-48d8-af7a-9ef55d2a0827","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the normal text fades out.\n\nThe marquee text fades in.\n\nThe marquee animation starts running.","styles":{}}],"children":[]},{"id":"9de59497-fbc8-4f7c-b5f5-784c9900067f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Logic","styles":{}}],"children":[]},{"id":"8ad4b48a-f3d9-4ea0-9e82-15b985af4132","type":"procode","props":{"code":"@keyframes marquee {\n 0% {\n transform: translateX(var(--start));\n }\n\n 100% {\n transform: translateX(var(--end));\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"g2bxhkuxr\",\"name\":\"code\",\"code\":\"@keyframes marquee {\\n 0% {\\n transform: translateX(var(--start));\\n }\\n\\n 100% {\\n transform: translateX(var(--end));\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4028a42-3815-4bb5-ade9-133e882ce818","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The marquee moves horizontally from ","styles":{}},{"type":"text","text":"--start","styles":{"code":true}},{"type":"text","text":" to ","styles":{}},{"type":"text","text":"--end","styles":{"code":true}},{"type":"text","text":".\n\nBecause the text is duplicated using ","styles":{}},{"type":"text","text":"text-shadow","styles":{"code":true}},{"type":"text","text":", the movement looks continuous.","styles":{}}],"children":[]},{"id":"67ae0d38-7beb-46e4-81ed-c17b13883a64","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]