Purple 3D Button

[{"id":"9396bea5-5f46-4162-b93b-bbd323724b1c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5edcb7d5-40df-4176-8125-23009242b94d","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --bg-page: #ffffff;\\n\\n --button-text: #1f1230;\\n\\n --button-bg: #f6edff;\\n --button-bg-hover: #efe0ff;\\n\\n --button-border: #8b5fbf;\\n --button-bottom: #c9a2ef;\\n --button-shadow: #ead8ff;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--bg-page);\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\nbutton {\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n outline: none;\\n border: 0;\\n vertical-align: middle;\\n text-decoration: none;\\n font-family: inherit;\\n font-size: 15px;\\n}\\n\\nbutton.learn-more {\\n font-weight: 800;\\n color: var(--button-text);\\n text-transform: uppercase;\\n letter-spacing: 0.01em;\\n padding: 1.25em 2.4em;\\n background: var(--button-bg);\\n border: 2px solid var(--button-border);\\n border-radius: 0.75em;\\n\\n transform-style: preserve-3d;\\n\\n transition:\\n transform 150ms cubic-bezier(0, 0, 0.58, 1),\\n background 150ms cubic-bezier(0, 0, 0.58, 1);\\n}\\n\\nbutton.learn-more::before {\\n position: absolute;\\n content: \\\"\\\";\\n width: 100%;\\n height: 100%;\\n\\n top: 0;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n\\n background: var(--button-bottom);\\n border-radius: inherit;\\n\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0.625em 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0.75em, -1em);\\n\\n transition:\\n transform 150ms cubic-bezier(0, 0, 0.58, 1),\\n box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);\\n}\\n\\nbutton.learn-more:hover {\\n background: var(--button-bg-hover);\\n transform: translate(0, 0.25em);\\n}\\n\\nbutton.learn-more:hover::before {\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0.5em 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0.5em, -1em);\\n}\\n\\nbutton.learn-more:active {\\n background: var(--button-bg-hover);\\n transform: translate(0, 0.75em);\\n}\\n\\nbutton.learn-more:active::before {\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0, -1em);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n button.learn-more,\\n button.learn-more::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Purple 3D 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":"7bea6b92-4082-4b14-b54b-4ef6bc27714f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"67fe0eb6-46e8-450f-a87a-6fc2f09179e7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"a367ee68-1a8e-4de0-8f01-83d1a7413380","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a3d071a9-12a1-4246-9af0-727dffa75427","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"c0c39008-1541-48e0-a086-d5e40d9709fc","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --bg-page: #ffffff;\\n\\n --button-text: #1f1230;\\n\\n --button-bg: #f6edff;\\n --button-bg-hover: #efe0ff;\\n\\n --button-border: #8b5fbf;\\n --button-bottom: #c9a2ef;\\n --button-shadow: #ead8ff;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--bg-page);\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\nbutton {\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n outline: none;\\n border: 0;\\n vertical-align: middle;\\n text-decoration: none;\\n font-family: inherit;\\n font-size: 15px;\\n}\\n\\nbutton.learn-more {\\n font-weight: 800;\\n color: var(--button-text);\\n text-transform: uppercase;\\n letter-spacing: 0.01em;\\n padding: 1.25em 2.4em;\\n background: var(--button-bg);\\n border: 2px solid var(--button-border);\\n border-radius: 0.75em;\\n\\n transform-style: preserve-3d;\\n\\n transition:\\n transform 150ms cubic-bezier(0, 0, 0.58, 1),\\n background 150ms cubic-bezier(0, 0, 0.58, 1);\\n}\\n\\nbutton.learn-more::before {\\n position: absolute;\\n content: \\\"\\\";\\n width: 100%;\\n height: 100%;\\n\\n top: 0;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n\\n background: var(--button-bottom);\\n border-radius: inherit;\\n\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0.625em 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0.75em, -1em);\\n\\n transition:\\n transform 150ms cubic-bezier(0, 0, 0.58, 1),\\n box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);\\n}\\n\\nbutton.learn-more:hover {\\n background: var(--button-bg-hover);\\n transform: translate(0, 0.25em);\\n}\\n\\nbutton.learn-more:hover::before {\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0.5em 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0.5em, -1em);\\n}\\n\\nbutton.learn-more:active {\\n background: var(--button-bg-hover);\\n transform: translate(0, 0.75em);\\n}\\n\\nbutton.learn-more:active::before {\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0, -1em);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n button.learn-more,\\n button.learn-more::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f58c74d8-d581-4483-972e-d0d502d400eb","type":"divider","props":{},"children":[]},{"id":"3a79dc5e-402d-4dba-8620-c2111952b28c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f915fdbd-edd2-4f6e-83cc-1f75b768d0b8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation ","styles":{}}],"children":[]},{"id":"2a83c0af-3412-4d85-968e-a86a4cf26642","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This component creates a soft purple 3D button using only HTML and CSS. The button has three visual states: default, hover, and active. The 3D depth is created with the ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element, not with extra HTML.","styles":{}}],"children":[]},{"id":"0fafeb68-5236-4d83-b119-650164e9c6b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Structure","styles":{}}],"children":[]},{"id":"b84a5330-7614-4d98-8346-6ae59ebd6f9b","type":"procode","props":{"code":"

\n \n

","language":"javascript","filename":"","files":"[{\"id\":\"2os7qp1v0\",\"name\":\"code\",\"code\":\"

\\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4faf7374-54f7-4693-b519-18516bfdf1d9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The HTML is simple. The ","styles":{}},{"type":"text","text":"main.page","styles":{"code":true}},{"type":"text","text":" element is only used to center the button on the screen. The actual button uses the class ","styles":{}},{"type":"text","text":"learn-more","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"34f0945b-6afb-4ab3-9a66-aef0fa4b1265","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS Color System","styles":{}}],"children":[]},{"id":"dfbb2ea1-15a7-40fb-86e3-945eef956aee","type":"procode","props":{"code":":root {\n --bg-page: #ffffff;\n\n --button-text: #1f1230;\n\n --button-bg: #f6edff;\n --button-bg-hover: #efe0ff;\n\n --button-border: #8b5fbf;\n --button-bottom: #c9a2ef;\n --button-shadow: #ead8ff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kbumm1rhs\",\"name\":\"code\",\"code\":\":root {\\n --bg-page: #ffffff;\\n\\n --button-text: #1f1230;\\n\\n --button-bg: #f6edff;\\n --button-bg-hover: #efe0ff;\\n\\n --button-border: #8b5fbf;\\n --button-bottom: #c9a2ef;\\n --button-shadow: #ead8ff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"06d43d10-3698-4c58-805d-7fb92175f38d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"All colors are stored inside CSS variables. This makes the button easier to maintain. The color system uses a soft purple palette: light purple for the top surface, medium purple for the border, and deeper purple for the lower 3D layer.","styles":{}}],"children":[]},{"id":"8922273e-ec30-4974-9c8f-1ab101255cba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Page Layout","styles":{}}],"children":[]},{"id":"96a6dc50-06de-46e7-95a2-83651d99e161","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"l4tbup00d\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a867488-aef5-4e19-aa20-aef004eda034","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button is centered using CSS Grid. ","styles":{}},{"type":"text","text":"min-height: 100vh","styles":{"code":true}},{"type":"text","text":" makes the page take the full screen height, and ","styles":{}},{"type":"text","text":"place-items: center","styles":{"code":true}},{"type":"text","text":" centers the button horizontally and vertically.","styles":{}}],"children":[]},{"id":"8736e60a-9d20-4a72-8c38-309bca2fca40","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Base Button Setup","styles":{}}],"children":[]},{"id":"8d9ebd5f-55a3-4205-b3c0-69091cf5860c","type":"procode","props":{"code":"button {\n position: relative;\n display: inline-block;\n cursor: pointer;\n outline: none;\n border: 0;\n font-family: inherit;\n font-size: 15px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"z09iea1bv\",\"name\":\"code\",\"code\":\"button {\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n outline: none;\\n border: 0;\\n font-family: inherit;\\n font-size: 15px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f211922d-dec3-485e-9024-c501b4673e07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The base ","styles":{}},{"type":"text","text":"button","styles":{"code":true}},{"type":"text","text":" style removes the default browser styling and prepares the button for custom design. ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" is important because the 3D layer will be positioned absolutely inside the button.","styles":{}}],"children":[]},{"id":"e1f3ba8e-1e98-4cc6-a65b-ef08993981fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Main Button Surface","styles":{}}],"children":[]},{"id":"9fcb0b1d-a484-4d0c-b803-5b9cd30c095f","type":"procode","props":{"code":"button.learn-more {\n font-weight: 800;\n color: var(--button-text);\n text-transform: uppercase;\n padding: 1.25em 2.4em;\n background: var(--button-bg);\n border: 2px solid var(--button-border);\n border-radius: 0.75em;\n transform-style: preserve-3d;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6jugtt3lz\",\"name\":\"code\",\"code\":\"button.learn-more {\\n font-weight: 800;\\n color: var(--button-text);\\n text-transform: uppercase;\\n padding: 1.25em 2.4em;\\n background: var(--button-bg);\\n border: 2px solid var(--button-border);\\n border-radius: 0.75em;\\n transform-style: preserve-3d;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"17dfb41c-afd8-4bed-99c5-d0986f780887","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is the visible top surface of the button. The text is uppercase, bold, and placed inside a rounded purple button. ","styles":{}},{"type":"text","text":"transform-style: preserve-3d","styles":{"code":true}},{"type":"text","text":" allows the fake bottom layer to sit behind the button in 3D space.","styles":{}}],"children":[]},{"id":"d2cc4a4b-8f18-4434-b92b-93c0a5e37d23","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"3D Bottom Layer","styles":{}}],"children":[]},{"id":"f7473a62-bc4f-4eff-a4b2-06da7e420981","type":"procode","props":{"code":"button.learn-more::before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n inset: 0;\n\n background: var(--button-bottom);\n border-radius: inherit;\n\n box-shadow:\n 0 0 0 2px var(--button-border),\n 0 0.625em 0 0 var(--button-shadow);\n\n transform: translate3d(0, 0.75em, -1em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ss3l4cx78\",\"name\":\"code\",\"code\":\"button.learn-more::before {\\n position: absolute;\\n content: \\\"\\\";\\n width: 100%;\\n height: 100%;\\n inset: 0;\\n\\n background: var(--button-bottom);\\n border-radius: inherit;\\n\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0.625em 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0.75em, -1em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a7cbb35-6a5c-444e-976c-dd4667880032","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element creates the lower part of the button. It has the same size and border radius as the main button, but it is pushed downward with:","styles":{}}],"children":[]},{"id":"89311a5c-238a-43f8-95fe-4eafd1909b0d","type":"procode","props":{"code":"transform: translate3d(0, 0.75em, -1em);","language":"javascript","filename":"","files":"[{\"id\":\"8qg8uvtji\",\"name\":\"code\",\"code\":\"transform: translate3d(0, 0.75em, -1em);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1a4dbdfd-7901-4a94-b17c-92601d0c330d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button look thick. The ","styles":{}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":" adds the soft purple base shadow under the button.","styles":{}}],"children":[]},{"id":"fc68f4e5-9d37-41b4-ba49-a2440ece90a1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow","styles":{}}],"children":[]},{"id":"e59e7280-ad7d-499a-ba53-2487c3587375","type":"procode","props":{"code":"button.learn-more:hover {\n background: var(--button-bg-hover);\n transform: translate(0, 0.25em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ddcjglgla\",\"name\":\"code\",\"code\":\"button.learn-more:hover {\\n background: var(--button-bg-hover);\\n transform: translate(0, 0.25em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c8698130-009b-4613-843f-ab5d6df94b81","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the user hovers, the top button moves slightly downward. This gives the feeling that the button is starting to be pressed.","styles":{}}],"children":[]},{"id":"44076264-bb3e-46e6-a03a-bfbbc0a4c787","type":"procode","props":{"code":"button.learn-more:hover::before {\n box-shadow:\n 0 0 0 2px var(--button-border),\n 0 0.5em 0 0 var(--button-shadow);\n\n transform: translate3d(0, 0.5em, -1em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ogg3jqi6j\",\"name\":\"code\",\"code\":\"button.learn-more:hover::before {\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0.5em 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0.5em, -1em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cb0818c6-fd04-449e-8fd0-d15a6e23b591","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"At the same time, the bottom layer moves closer to the top layer. The depth becomes smaller, so the hover interaction feels physical and responsive.","styles":{}}],"children":[]},{"id":"39d61f2e-7783-4b09-9318-a01b1bea8feb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Click Flow","styles":{}}],"children":[]},{"id":"0234b0f5-f4cd-41fd-8c12-1609f125ff78","type":"procode","props":{"code":"button.learn-more:active {\n background: var(--button-bg-hover);\n transform: translate(0, 0.75em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"awd2siwhl\",\"name\":\"code\",\"code\":\"button.learn-more:active {\\n background: var(--button-bg-hover);\\n transform: translate(0, 0.75em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"65bb7b23-0858-4eee-831d-53fa9da11f07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the button is clicked, the top surface moves fully downward.","styles":{}}],"children":[]},{"id":"8f53c2cc-3b71-4a8c-a27a-065c73c6bf30","type":"procode","props":{"code":"button.learn-more:active::before {\n box-shadow:\n 0 0 0 2px var(--button-border),\n 0 0 0 0 var(--button-shadow);\n\n transform: translate3d(0, 0, -1em);\n}","language":"javascript","filename":"","files":"[{\"id\":\"cmivgahv0\",\"name\":\"code\",\"code\":\"button.learn-more:active::before {\\n box-shadow:\\n 0 0 0 2px var(--button-border),\\n 0 0 0 0 var(--button-shadow);\\n\\n transform: translate3d(0, 0, -1em);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dae94a67-3670-4029-91b0-446fc0912028","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The bottom layer moves back to the original position and the shadow disappears. This creates the pressed-button effect.","styles":{}}],"children":[]},{"id":"27dd4a9e-3e4d-4ea0-b710-41659e4605f6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Logic","styles":{}}],"children":[]},{"id":"2ca3666a-6ab8-4046-bc40-1a116beb9e5c","type":"procode","props":{"code":"transition:\n transform 150ms cubic-bezier(0, 0, 0.58, 1),\n background 150ms cubic-bezier(0, 0, 0.58, 1);","language":"javascript","filename":"","files":"[{\"id\":\"bnnze3gey\",\"name\":\"code\",\"code\":\"transition:\\n transform 150ms cubic-bezier(0, 0, 0.58, 1),\\n background 150ms cubic-bezier(0, 0, 0.58, 1);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fb9ad2d7-f7aa-4155-9ce4-5c0a09c317cb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The animation is short and responsive. The ","styles":{}},{"type":"text","text":"transform","styles":{"code":true}},{"type":"text","text":" controls the press movement, while ","styles":{}},{"type":"text","text":"background","styles":{"code":true}},{"type":"text","text":" controls the soft hover color change. The cubic-bezier timing makes the movement feel natural instead of linear.","styles":{}}],"children":[]},{"id":"d05c02c2-e6d8-4147-9829-ec224abd817e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Support","styles":{}}],"children":[]},{"id":"1bd873f3-852f-4bf4-9514-2bed128d9cf5","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n button.learn-more,\n button.learn-more::before {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"vilfceysj\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n button.learn-more,\\n button.learn-more::before {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"733edb14-7b48-4c26-b4e3-c6036e0d24eb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This improves accessibility. Users who prefer reduced motion will still see the button, but without animation.","styles":{}}],"children":[]},{"id":"ce4d4949-b9ec-4794-a982-b5d8567016fd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]