Left Arrow Text Up Rolling Button

[{"id":"bb0f8af7-ffd6-47b6-88fd-3987b4f5ab1d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"931c30b0-397e-4129-81a4-bebe80865b8f","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --roll-speed: 600ms;\\n --roll-ease: cubic-bezier(0.16, 1, 0.3, 1);\\n --roll-gap: 24px;\\n --hover-safe-area: 46px;\\n\\n --button-color: #202020;\\n --button-gap: 12px;\\n\\n --icon-width: 36px;\\n --text-width: 118px;\\n --button-height: 46px;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.rolling-arrow-preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.rolling-arrow-button {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n gap: var(--button-gap);\\n padding: 0;\\n border: 0;\\n background: transparent;\\n color: var(--button-color);\\n cursor: pointer;\\n}\\n\\n/* Stable invisible hover area */\\n.rolling-arrow-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: calc(var(--hover-safe-area) * -1);\\n right: calc(var(--hover-safe-area) * -1);\\n bottom: calc(var(--hover-safe-area) * -1);\\n left: calc(var(--hover-safe-area) * -1);\\n z-index: 0;\\n}\\n\\n.rolling-arrow-icon-shell,\\n.rolling-arrow-text-shell {\\n position: relative;\\n z-index: 1;\\n height: var(--button-height);\\n overflow: visible;\\n perspective: 1200px;\\n}\\n\\n.rolling-arrow-icon-shell {\\n width: var(--icon-width);\\n}\\n\\n.rolling-arrow-text-shell {\\n width: var(--text-width);\\n}\\n\\n.rolling-arrow-icon-face,\\n.rolling-arrow-text-face {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n align-items: center;\\n color: currentColor;\\n backface-visibility: hidden;\\n transform-style: preserve-3d;\\n will-change: transform;\\n transition: transform var(--roll-speed) var(--roll-ease);\\n}\\n\\n.rolling-arrow-icon-face {\\n justify-content: center;\\n}\\n\\n.rolling-arrow-text-face {\\n justify-content: flex-start;\\n font-size: 34px;\\n font-weight: 400;\\n line-height: 1;\\n}\\n\\n/* Arrow: turns down */\\n.rolling-arrow-icon-front {\\n transform-origin: center top;\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\\n\\n.rolling-arrow-icon-back {\\n transform-origin: center bottom;\\n transform: translate3d(0, calc(-100% - var(--roll-gap)), 0) rotateX(92deg);\\n}\\n\\n/* Text: turns up */\\n.rolling-arrow-text-front {\\n transform-origin: center bottom;\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\\n\\n.rolling-arrow-text-back {\\n transform-origin: center top;\\n transform: translate3d(0, calc(100% + var(--roll-gap)), 0) rotateX(-92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-icon-front {\\n transform: translate3d(0, calc(100% + var(--roll-gap)), 0) rotateX(-92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-icon-back {\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-text-front {\\n transform: translate3d(0, calc(-100% - var(--roll-gap)), 0) rotateX(92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-text-back {\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\\n\\n.rolling-arrow-button:active {\\n transform: scale(0.98);\\n}\\n\\n.rolling-arrow-button:focus-visible {\\n outline: 2px solid currentColor;\\n outline-offset: 8px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .rolling-arrow-icon-face,\\n .rolling-arrow-text-face {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Left Arrow Text Up Rolling Button\\n \\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","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"65","mobileSplitRatio":"50"},"children":[]},{"id":"7973ab6b-6677-4ba6-818a-bd4086fdcac8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"4d147418-9959-4108-b4c4-28636e7c44fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4750526d-a6c1-4f52-b5c4-8640c9b85d42","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"cb6a8160-017f-40e6-8ec5-da038d6f644d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a0c5a42-b925-4ff9-9e7f-43941b777b74","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"4ee43ec4-989d-490f-a577-487003b2431c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --roll-speed: 600ms;\\n --roll-ease: cubic-bezier(0.16, 1, 0.3, 1);\\n --roll-gap: 24px;\\n --hover-safe-area: 46px;\\n\\n --button-color: #202020;\\n --button-gap: 12px;\\n\\n --icon-width: 36px;\\n --text-width: 118px;\\n --button-height: 46px;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.rolling-arrow-preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.rolling-arrow-button {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n gap: var(--button-gap);\\n padding: 0;\\n border: 0;\\n background: transparent;\\n color: var(--button-color);\\n cursor: pointer;\\n}\\n\\n/* Stable invisible hover area */\\n.rolling-arrow-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: calc(var(--hover-safe-area) * -1);\\n right: calc(var(--hover-safe-area) * -1);\\n bottom: calc(var(--hover-safe-area) * -1);\\n left: calc(var(--hover-safe-area) * -1);\\n z-index: 0;\\n}\\n\\n.rolling-arrow-icon-shell,\\n.rolling-arrow-text-shell {\\n position: relative;\\n z-index: 1;\\n height: var(--button-height);\\n overflow: visible;\\n perspective: 1200px;\\n}\\n\\n.rolling-arrow-icon-shell {\\n width: var(--icon-width);\\n}\\n\\n.rolling-arrow-text-shell {\\n width: var(--text-width);\\n}\\n\\n.rolling-arrow-icon-face,\\n.rolling-arrow-text-face {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n align-items: center;\\n color: currentColor;\\n backface-visibility: hidden;\\n transform-style: preserve-3d;\\n will-change: transform;\\n transition: transform var(--roll-speed) var(--roll-ease);\\n}\\n\\n.rolling-arrow-icon-face {\\n justify-content: center;\\n}\\n\\n.rolling-arrow-text-face {\\n justify-content: flex-start;\\n font-size: 34px;\\n font-weight: 400;\\n line-height: 1;\\n}\\n\\n/* Arrow: turns down */\\n.rolling-arrow-icon-front {\\n transform-origin: center top;\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\\n\\n.rolling-arrow-icon-back {\\n transform-origin: center bottom;\\n transform: translate3d(0, calc(-100% - var(--roll-gap)), 0) rotateX(92deg);\\n}\\n\\n/* Text: turns up */\\n.rolling-arrow-text-front {\\n transform-origin: center bottom;\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\\n\\n.rolling-arrow-text-back {\\n transform-origin: center top;\\n transform: translate3d(0, calc(100% + var(--roll-gap)), 0) rotateX(-92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-icon-front {\\n transform: translate3d(0, calc(100% + var(--roll-gap)), 0) rotateX(-92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-icon-back {\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-text-front {\\n transform: translate3d(0, calc(-100% - var(--roll-gap)), 0) rotateX(92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-text-back {\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\\n\\n.rolling-arrow-button:active {\\n transform: scale(0.98);\\n}\\n\\n.rolling-arrow-button:focus-visible {\\n outline: 2px solid currentColor;\\n outline-offset: 8px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .rolling-arrow-icon-face,\\n .rolling-arrow-text-face {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a37dd1b3-d6ad-44a0-945d-63fd788c5ef5","type":"divider","props":{},"children":[]},{"id":"df286a84-8f92-44cf-9ce8-cabf58b05e47","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"fef783b3-72bb-4f52-ba61-3cec057704ae","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Name","styles":{"bold":true}}],"children":[]},{"id":"dd746e6f-67de-4528-a534-0683efe20549","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The button has no background, no border, and no filled shape. It only uses a black arrow and black text.","styles":{}}],"children":[]},{"id":"020205da-8f16-423d-998b-4fb1ce02d9a3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The button is centered on the full page.","styles":{}}],"children":[]},{"id":"cd3dcfe5-1da3-4fca-b367-54c8e5f0f246","type":"procode","props":{"code":".rolling-arrow-preview {\n min-height: 100vh;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yr3syy7hn\",\"name\":\"code\",\"code\":\".rolling-arrow-preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9cac7797-9e54-4aba-bab9-6ed9aed57ab3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover, the arrow rolls downward and the text rolls upward. The second side fills the default position.","styles":{}}],"children":[]},{"id":"74e1870e-19da-46bb-a903-7e794c7ed481","type":"procode","props":{"code":".rolling-arrow-button:hover .rolling-arrow-icon-front {\n transform: translate3d(0, calc(100% + var(--roll-gap)), 0) rotateX(-92deg);\n}\n\n.rolling-arrow-button:hover .rolling-arrow-text-front {\n transform: translate3d(0, calc(-100% - var(--roll-gap)), 0) rotateX(92deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ft31iyi02\",\"name\":\"code\",\"code\":\".rolling-arrow-button:hover .rolling-arrow-icon-front {\\n transform: translate3d(0, calc(100% + var(--roll-gap)), 0) rotateX(-92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-text-front {\\n transform: translate3d(0, calc(-100% - var(--roll-gap)), 0) rotateX(92deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ebd469d2-d680-4a2d-9d55-1af0c47b647b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active\n","styles":{"bold":true}},{"type":"text","text":"When clicked, the whole button scales down slightly.","styles":{}}],"children":[]},{"id":"c8ccd657-ebc6-4be0-a533-4176608ed971","type":"procode","props":{"code":".rolling-arrow-button:active {\n transform: scale(0.98);\n}","language":"javascript","filename":"","files":"[{\"id\":\"vyy5ubwlh\",\"name\":\"code\",\"code\":\".rolling-arrow-button:active {\\n transform: scale(0.98);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"09bd1f16-c5b2-4b72-a078-dfb46fe8b487","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The animation uses ","styles":{}},{"type":"text","text":"transition","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"translate3d","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"rotateX","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"perspective","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"backface-visibility","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"89af120d-8a21-4e01-ade9-7b5456715190","type":"procode","props":{"code":".rolling-arrow-icon-face,\n.rolling-arrow-text-face {\n backface-visibility: hidden;\n transform-style: preserve-3d;\n transition: transform var(--roll-speed) var(--roll-ease);\n}","language":"javascript","filename":"","files":"[{\"id\":\"stvzzs3uk\",\"name\":\"code\",\"code\":\".rolling-arrow-icon-face,\\n.rolling-arrow-text-face {\\n backface-visibility: hidden;\\n transform-style: preserve-3d;\\n transition: transform var(--roll-speed) var(--roll-ease);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4f229f50-eda3-4e9b-9411-2fbf008f5184","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Arrow Down Effect\n","styles":{"bold":true}},{"type":"text","text":"The front arrow moves down and rotates away. The back arrow starts above, then fills the center.","styles":{}}],"children":[]},{"id":"58962033-cc67-4cc5-8d14-9bf37628ab56","type":"procode","props":{"code":".rolling-arrow-icon-back {\n transform: translate3d(0, calc(-100% - var(--roll-gap)), 0) rotateX(92deg);\n}\n\n.rolling-arrow-button:hover .rolling-arrow-icon-back {\n transform: translate3d(0, 0, 0) rotateX(0deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"psxqg8pdq\",\"name\":\"code\",\"code\":\".rolling-arrow-icon-back {\\n transform: translate3d(0, calc(-100% - var(--roll-gap)), 0) rotateX(92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-icon-back {\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b9cc4b31-21c6-47d4-8728-181723163970","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Up Effect\n","styles":{"bold":true}},{"type":"text","text":"The front text moves up and rotates away. The back text starts below, then fills the center.","styles":{}}],"children":[]},{"id":"e41de259-71cd-4476-bca1-b2131ab623a1","type":"procode","props":{"code":".rolling-arrow-text-back {\n transform: translate3d(0, calc(100% + var(--roll-gap)), 0) rotateX(-92deg);\n}\n\n.rolling-arrow-button:hover .rolling-arrow-text-back {\n transform: translate3d(0, 0, 0) rotateX(0deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3w05xdyr0\",\"name\":\"code\",\"code\":\".rolling-arrow-text-back {\\n transform: translate3d(0, calc(100% + var(--roll-gap)), 0) rotateX(-92deg);\\n}\\n\\n.rolling-arrow-button:hover .rolling-arrow-text-back {\\n transform: translate3d(0, 0, 0) rotateX(0deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"66389d44-dfc5-4c68-8939-7f3fb1d08c15","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Stable Hover Area\n","styles":{"bold":true}},{"type":"text","text":"The invisible hover area prevents glitching when the mouse is near the rolling parts.","styles":{}}],"children":[]},{"id":"8cf1e4d4-fda3-48a1-a932-52690c8ab88e","type":"procode","props":{"code":".rolling-arrow-button::before {\n top: calc(var(--hover-safe-area) * -1);\n right: calc(var(--hover-safe-area) * -1);\n bottom: calc(var(--hover-safe-area) * -1);\n left: calc(var(--hover-safe-area) * -1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"jtnu4y6ar\",\"name\":\"code\",\"code\":\".rolling-arrow-button::before {\\n top: calc(var(--hover-safe-area) * -1);\\n right: calc(var(--hover-safe-area) * -1);\\n bottom: calc(var(--hover-safe-area) * -1);\\n left: calc(var(--hover-safe-area) * -1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"94ff0995-7341-44a3-9822-8aa28af098fe","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the rolling speed here:","styles":{}}],"children":[]},{"id":"2ac0d464-5bdc-48a8-8a40-c838926ecbeb","type":"procode","props":{"code":"--roll-speed: 600ms;","language":"javascript","filename":"","files":"[{\"id\":\"936s5pojz\",\"name\":\"code\",\"code\":\"--roll-speed: 600ms;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c27a2d51-2858-471e-b4fe-671e012d0500","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Lower ","styles":{}},{"type":"text","text":"600ms","styles":{"code":true}},{"type":"text","text":" to make it faster.\n\nIncrease ","styles":{}},{"type":"text","text":"600ms","styles":{"code":true}},{"type":"text","text":" to make it smoother.","styles":{}}],"children":[]},{"id":"b47b1b1f-2b95-4172-b55e-fe0e353392b3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Easing\n","styles":{"bold":true}},{"type":"text","text":"Change the smooth motion feel here:","styles":{}}],"children":[]},{"id":"48a884b7-5937-4a85-8842-bdef9c6a54a6","type":"procode","props":{"code":"--roll-ease: cubic-bezier(0.16, 1, 0.3, 1);","language":"javascript","filename":"","files":"[{\"id\":\"pnmtz0f8q\",\"name\":\"code\",\"code\":\"--roll-ease: cubic-bezier(0.16, 1, 0.3, 1);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b6029060-6198-4ecc-934e-6cb910668d33","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Gap\n","styles":{"bold":true}},{"type":"text","text":"Change the gap between rolling sides here:","styles":{}}],"children":[]},{"id":"262ea99e-accd-40ee-952a-182d164ce3e5","type":"procode","props":{"code":"--roll-gap: 24px;","language":"javascript","filename":"","files":"[{\"id\":\"rlu853843\",\"name\":\"code\",\"code\":\"--roll-gap: 24px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cb313250-d8f5-4307-a335-fb5fd1082aac","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the arrow and text color here:","styles":{}}],"children":[]},{"id":"cdc028db-8889-4f3f-ae74-6601819615ab","type":"procode","props":{"code":"--button-color: #202020;","language":"javascript","filename":"","files":"[{\"id\":\"fxox3o3c7\",\"name\":\"code\",\"code\":\"--button-color: #202020;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2e03c7c2-8ab3-4ff5-bb3f-a05eb71425b1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change both text faces here:","styles":{}}],"children":[]},{"id":"d5b7ab96-96b9-49ad-a175-068c3df709b9","type":"procode","props":{"code":"Button\nButton","language":"javascript","filename":"","files":"[{\"id\":\"h5y1evtxp\",\"name\":\"code\",\"code\":\"Button\\nButton\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0ba806e6-5a68-4db2-a96d-f13a0660c614","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"No JavaScript is needed. The effect is handled with HTML + CSS.","styles":{}}],"children":[]},{"id":"8bcb5981-7094-416b-89c4-25c8ae978949","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]