Inset Fill Button

[{"id":"68e71277-4e27-468d-97e3-fc5b4dd60f22","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e8b505ca-7a6e-404b-989d-bb5f5e3fd5e4","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 background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.inset-fill-button {\\n position: relative;\\n display: inline-block;\\n margin: 15px;\\n padding: 15px 30px;\\n text-align: center;\\n font-size: 18px;\\n letter-spacing: 1px;\\n text-decoration: none;\\n color: #5d3fd3;\\n background: transparent;\\n cursor: pointer;\\n border: 2px solid #5d3fd3;\\n border-radius: 10px;\\n box-shadow: inset 0 0 0 0 #5d3fd3;\\n transition:\\n color 0.5s ease-out,\\n box-shadow 0.5s ease-out,\\n transform 0.2s ease-out;\\n}\\n\\n.inset-fill-button:hover {\\n color: #ffffff;\\n box-shadow: inset 0 -100px 0 0 #5d3fd3;\\n}\\n\\n.inset-fill-button:active {\\n transform: scale(0.9);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .inset-fill-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Inset Fill Button\\n \\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","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"55bff2c1-b74c-4747-b50a-ef62480aed39","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"daf63215-ddf4-4dd1-8462-b1470be3d8b5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"c8154afc-dfda-45ad-9a65-787f8490b105","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b289106c-e4bb-4ff8-ac4c-9ed37abd1868","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"b413ab73-bb5a-4492-96fe-0078d213f72c","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 background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.inset-fill-button {\\n position: relative;\\n display: inline-block;\\n margin: 15px;\\n padding: 15px 30px;\\n text-align: center;\\n font-size: 18px;\\n letter-spacing: 1px;\\n text-decoration: none;\\n color: #5d3fd3;\\n background: transparent;\\n cursor: pointer;\\n border: 2px solid #5d3fd3;\\n border-radius: 10px;\\n box-shadow: inset 0 0 0 0 #5d3fd3;\\n transition:\\n color 0.5s ease-out,\\n box-shadow 0.5s ease-out,\\n transform 0.2s ease-out;\\n}\\n\\n.inset-fill-button:hover {\\n color: #ffffff;\\n box-shadow: inset 0 -100px 0 0 #5d3fd3;\\n}\\n\\n.inset-fill-button:active {\\n transform: scale(0.9);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .inset-fill-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59017136-5e85-456d-b021-2cebf59ac0a7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9b2e5e19-3336-41f6-a05d-6cc7d897f12c","type":"divider","props":{},"children":[]},{"id":"5b2f5722-f1ef-46f1-a0c7-b0a6abac0f15","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"1926f4d8-0578-4491-9953-a5d45cd8fdd4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button starts with transparent background, iris text color, and iris border using ","styles":{}},{"type":"text","text":"#5d3fd3","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a5b7b305-b738-4fef-9f94-cdd58e3a404e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The fill effect is created using ","styles":{}},{"type":"text","text":"box-shadow: inset","styles":{"code":true}},{"type":"text","text":". At the default state, the inset shadow has no visible size:","styles":{}}],"children":[]},{"id":"97dd5714-d84e-4005-a09e-08d77abe2881","type":"procode","props":{"code":"box-shadow: inset 0 0 0 0 #5d3fd3;","language":"javascript","filename":"","files":"[{\"id\":\"fauam65pm\",\"name\":\"code\",\"code\":\"box-shadow: inset 0 0 0 0 #5d3fd3;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"84ce224a-7d50-4c95-8f45-7730a9cc770a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill Animation","styles":{}}],"children":[]},{"id":"39aae4f7-9ae4-4e9b-99bb-eb33a2a0442f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When hovering, the inset shadow expands upward inside the button:","styles":{}}],"children":[]},{"id":"276eb606-e491-466d-9c95-a562f65537b5","type":"procode","props":{"code":"box-shadow: inset 0 -100px 0 0 #5d3fd3;","language":"javascript","filename":"","files":"[{\"id\":\"tgkjdn2an\",\"name\":\"code\",\"code\":\"box-shadow: inset 0 -100px 0 0 #5d3fd3;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7d4424e1-f2b4-4526-ba05-789a5554072e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button look like it is filling with iris color from the bottom to the full button area.","styles":{}}],"children":[]},{"id":"787d0f28-631a-4987-9293-e81eb0237279","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Color Change","styles":{}}],"children":[]},{"id":"0d3e67c6-094b-4bbe-9ac4-05873f1f6da0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The text color changes from iris to white on hover:","styles":{}}],"children":[]},{"id":"a6129f43-fba4-4f9e-bb80-fe4211300323","type":"procode","props":{"code":".inset-fill-button:hover {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"74elworn2\",\"name\":\"code\",\"code\":\".inset-fill-button:hover {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0664195-4d81-4c9c-aeb6-553826618cb7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press Animation","styles":{}}],"children":[]},{"id":"8539ea88-af18-4613-8ee5-d36181678841","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When the button is clicked, it scales down slightly:","styles":{}}],"children":[]},{"id":"9cbe4358-28b2-4a91-8e47-f52e8fb056ed","type":"procode","props":{"code":".inset-fill-button:active {\n transform: scale(0.9);\n}","language":"javascript","filename":"","files":"[{\"id\":\"fjw810v9r\",\"name\":\"code\",\"code\":\".inset-fill-button:active {\\n transform: scale(0.9);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d44b09d-e80b-4102-af8b-23cab75a985f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This gives the button a pressed feeling.","styles":{}}],"children":[]},{"id":"8d921e22-1c4c-4680-b7a3-40833a2eb7e1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"539bdc29-03eb-4bdf-b758-189730189e66","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" class uses flexbox to center the button both vertically and horizontally:","styles":{}}],"children":[]},{"id":"9368a4e0-c00f-431f-9723-7002372031b2","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nkkqjggzv\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74b6f2b5-4235-4ef1-a5a6-1513c29d0bce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"e92bc0e1-c3ba-464f-8d98-1ed4b3cdecb9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The media query disables animation for users who prefer reduced motion:","styles":{}}],"children":[]},{"id":"5dbadbf4-97df-4383-be30-46eba8c767b9","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .inset-fill-button {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"s131o7e24\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .inset-fill-button {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d57d72b-2bde-475b-b0d5-8b3e81c651bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]