Neumorphic Fill Button

[{"id":"dedd58e3-df10-45df-afcf-e890023508b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e1ff3887-e549-49f5-ba13-c6b8cdde33bd","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: #e8e8e8;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.button2 {\\n display: inline-block;\\n transition: all 0.2s ease-in;\\n position: relative;\\n overflow: hidden;\\n z-index: 1;\\n color: #090909;\\n padding: 0.7em 1.8em;\\n cursor: pointer;\\n font-size: 18px;\\n border-radius: 999px;\\n background: #e8e8e8;\\n border: 1px solid #e8e8e8;\\n box-shadow:\\n 6px 6px 12px #c5c5c5,\\n -6px -6px 12px #ffffff;\\n}\\n\\n.button2:active {\\n color: #666;\\n box-shadow:\\n inset 4px 4px 12px #c5c5c5,\\n inset -4px -4px 12px #ffffff;\\n}\\n\\n.button2:before {\\n content: \\\"\\\";\\n position: absolute;\\n left: 50%;\\n transform: translateX(-50%) scaleY(1) scaleX(1.25);\\n top: 100%;\\n width: 140%;\\n height: 180%;\\n background-color: rgba(93, 63, 211, 0.08);\\n border-radius: 50%;\\n display: block;\\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\\n z-index: -1;\\n}\\n\\n.button2:after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 55%;\\n transform: translateX(-50%) scaleY(1) scaleX(1.45);\\n top: 180%;\\n width: 160%;\\n height: 190%;\\n background-color: #6d4aff;\\n border-radius: 50%;\\n display: block;\\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\\n z-index: -1;\\n}\\n\\n.button2:hover {\\n color: #ffffff;\\n border-color: #e8e8e8;\\n}\\n\\n.button2:hover:before {\\n top: -35%;\\n background-color: #6d4aff;\\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\\n}\\n\\n.button2:hover:after {\\n top: -45%;\\n background-color: #6d4aff;\\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button2,\\n .button2::before,\\n .button2::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Neumorphic 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":"00b789a4-d052-44d0-bb0d-806807572a97","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c4e91e3c-9998-49ab-a374-98ab8861b22d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"501dec8a-30f9-46d2-b68e-13838e8cbfd8","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"488c8d9a-3cac-404b-afa2-fe9a16ba7f9b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"e956e442-aa03-4606-94fa-79bb1b007b83","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: #e8e8e8;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.button2 {\\n display: inline-block;\\n transition: all 0.2s ease-in;\\n position: relative;\\n overflow: hidden;\\n z-index: 1;\\n color: #090909;\\n padding: 0.7em 1.8em;\\n cursor: pointer;\\n font-size: 18px;\\n border-radius: 999px;\\n background: #e8e8e8;\\n border: 1px solid #e8e8e8;\\n box-shadow:\\n 6px 6px 12px #c5c5c5,\\n -6px -6px 12px #ffffff;\\n}\\n\\n.button2:active {\\n color: #666;\\n box-shadow:\\n inset 4px 4px 12px #c5c5c5,\\n inset -4px -4px 12px #ffffff;\\n}\\n\\n.button2:before {\\n content: \\\"\\\";\\n position: absolute;\\n left: 50%;\\n transform: translateX(-50%) scaleY(1) scaleX(1.25);\\n top: 100%;\\n width: 140%;\\n height: 180%;\\n background-color: rgba(93, 63, 211, 0.08);\\n border-radius: 50%;\\n display: block;\\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\\n z-index: -1;\\n}\\n\\n.button2:after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 55%;\\n transform: translateX(-50%) scaleY(1) scaleX(1.45);\\n top: 180%;\\n width: 160%;\\n height: 190%;\\n background-color: #6d4aff;\\n border-radius: 50%;\\n display: block;\\n transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);\\n z-index: -1;\\n}\\n\\n.button2:hover {\\n color: #ffffff;\\n border-color: #e8e8e8;\\n}\\n\\n.button2:hover:before {\\n top: -35%;\\n background-color: #6d4aff;\\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\\n}\\n\\n.button2:hover:after {\\n top: -45%;\\n background-color: #6d4aff;\\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button2,\\n .button2::before,\\n .button2::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"baa12f76-ad2d-4ea9-8a2c-3eafe3ff3d90","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"30fd8a54-0d53-4178-9d7f-51af603459d3","type":"divider","props":{},"children":[]},{"id":"7439b172-5975-482b-b3c2-6a390a99084a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"ad63c906-06e7-459b-9625-8201e5b7cc6c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button is only one element inside the centered wrapper.","styles":{}}],"children":[]},{"id":"f4c1580a-19b1-4f7f-8c0a-a6cd70238142","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"d8mibfsiq\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"27393503-b28b-4309-b4b3-c794f9c3cdb8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe body uses full viewport height and flex center.","styles":{}}],"children":[]},{"id":"a0b54ecb-163b-468e-8197-d73af8ae01f3","type":"procode","props":{"code":"body {\n margin: 0;\n min-height: 100vh;\n background: #e8e8e8;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fk5g9dwcs\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n min-height: 100vh;\\n background: #e8e8e8;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bedc6c06-b59a-4563-b2ed-7be58d79268d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button appear in the center of the preview.","styles":{}}],"children":[]},{"id":"d560fe0b-48a3-4687-bb4a-3008132cbded","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n\nThe button uses a light neumorphic surface.","styles":{}}],"children":[]},{"id":"6470240c-36e4-4fad-8c67-5011aa731839","type":"procode","props":{"code":".button2 {\n position: relative;\n overflow: hidden;\n color: #090909;\n background: #e8e8e8;\n border: 1px solid #e8e8e8;\n border-radius: 999px;\n box-shadow:\n 6px 6px 12px #c5c5c5,\n -6px -6px 12px #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0tw9nqwrj\",\"name\":\"code\",\"code\":\".button2 {\\n position: relative;\\n overflow: hidden;\\n color: #090909;\\n background: #e8e8e8;\\n border: 1px solid #e8e8e8;\\n border-radius: 999px;\\n box-shadow:\\n 6px 6px 12px #c5c5c5,\\n -6px -6px 12px #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c698510-18ce-43c7-94c4-2539b8177a8a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The first shadow creates the dark lower shadow.\n\nThe second shadow creates the white highlight.","styles":{}}],"children":[]},{"id":"078d06b0-0e4a-4b35-822a-f16956b178ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Layer One\n\nThe ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" layer starts below the button.","styles":{}}],"children":[]},{"id":"150a7bdd-ec03-444f-9c40-b87c90c4cbfd","type":"procode","props":{"code":".button2:before {\n top: 100%;\n width: 140%;\n height: 180%;\n background-color: rgba(93, 63, 211, 0.08);\n border-radius: 50%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s6b7ju4da\",\"name\":\"code\",\"code\":\".button2:before {\\n top: 100%;\\n width: 140%;\\n height: 180%;\\n background-color: rgba(93, 63, 211, 0.08);\\n border-radius: 50%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b64a53e1-fccf-4eba-bfb0-4006f133fb42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It is a large circle that moves upward on hover.","styles":{}}],"children":[]},{"id":"bcfa4037-bb88-425c-b1fc-d0578363abb8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fill Layer Two\n\nThe ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" layer also starts below the button, but farther down.","styles":{}}],"children":[]},{"id":"19da3008-38d3-4203-9935-7021c6c064a8","type":"procode","props":{"code":".button2:after {\n top: 180%;\n width: 160%;\n height: 190%;\n background-color: #6d4aff;\n border-radius: 50%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"5wwlvbuat\",\"name\":\"code\",\"code\":\".button2:after {\\n top: 180%;\\n width: 160%;\\n height: 190%;\\n background-color: #6d4aff;\\n border-radius: 50%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a7c010ae-d35a-4d18-9e4f-3609b15137b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This second layer creates the stronger purple fill.","styles":{}}],"children":[]},{"id":"a496b516-5233-4263-9d5b-37ac930221ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow\n\nOn hover, the text becomes white.","styles":{}}],"children":[]},{"id":"511c28ce-f330-4fc7-b793-5f3d8c228300","type":"procode","props":{"code":".button2:hover {\n color: #ffffff;\n border-color: #e8e8e8;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mjnwhp415\",\"name\":\"code\",\"code\":\".button2:hover {\\n color: #ffffff;\\n border-color: #e8e8e8;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a8fc5dcd-e68c-48ce-b425-594bed786a25","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then both circular layers move upward and cover the button.","styles":{}}],"children":[]},{"id":"09b8c9ed-de04-4c2b-adff-0aece3c11764","type":"procode","props":{"code":".button2:hover:before {\n top: -35%;\n background-color: #6d4aff;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}\n\n.button2:hover:after {\n top: -45%;\n background-color: #6d4aff;\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\n}","language":"javascript","filename":"","files":"[{\"id\":\"su6a2p9wu\",\"name\":\"code\",\"code\":\".button2:hover:before {\\n top: -35%;\\n background-color: #6d4aff;\\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\\n}\\n\\n.button2:hover:after {\\n top: -45%;\\n background-color: #6d4aff;\\n transform: translateX(-50%) scaleY(1.3) scaleX(0.8);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c0d192e-1e03-4e24-9c39-f2c01e4e7cf1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press\n\nWhen clicked, the shadow changes to inset.","styles":{}}],"children":[]},{"id":"97d04797-9a34-41cc-a5b3-2eb5c52f67bd","type":"procode","props":{"code":".button2:active {\n color: #666;\n box-shadow:\n inset 4px 4px 12px #c5c5c5,\n inset -4px -4px 12px #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"icz9x1hrv\",\"name\":\"code\",\"code\":\".button2:active {\\n color: #666;\\n box-shadow:\\n inset 4px 4px 12px #c5c5c5,\\n inset -4px -4px 12px #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"126b1e40-3716-4c32-b47a-1c931ae0a4dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the button feel pressed into the surface.","styles":{}}],"children":[]},{"id":"5dcb42fa-87ce-4bc3-bcc4-23a5ca4432a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n\nThe fill animation uses this easing:","styles":{}}],"children":[]},{"id":"3edaa7be-4b3a-42ea-9fce-4dcb21c59d5a","type":"procode","props":{"code":"cubic-bezier(0.55, 0, 0.1, 1)","language":"javascript","filename":"","files":"[{\"id\":\"kv1ur9cap\",\"name\":\"code\",\"code\":\"cubic-bezier(0.55, 0, 0.1, 1)\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f653055e-76d0-4daf-a35b-b6f167c12dfb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The delay ","styles":{}},{"type":"text","text":"0.1s","styles":{"code":true}},{"type":"text","text":" makes the purple circle feel like it rises from under the button instead of appearing instantly.","styles":{}}],"children":[]},{"id":"65269b55-f15c-4b63-b238-2bd2cdbb89b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n\nThe media query removes animation for reduced-motion users.","styles":{}}],"children":[]},{"id":"554faaf3-6ed7-456e-88cd-fb7ee068fad2","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .button2,\n .button2::before,\n .button2::after {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"68mwu6p4v\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .button2,\\n .button2::before,\\n .button2::after {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d19c5db6-6896-4f5a-9fe8-551f65c46877","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]