Inset Gradient Hover Button

[{"id":"a2b46190-f946-4c93-ad43-b4a081a1bc0d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3dd15c17-747b-4a95-8673-d4fa9f770d9e","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: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.button-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.gradient-inset-button {\\n width: 170px;\\n height: 60px;\\n border: none;\\n outline: none;\\n border-radius: 50px;\\n background: #ffffff;\\n color: #231942;\\n font-size: 18px;\\n font-weight: 600;\\n cursor: pointer;\\n transition:\\n background 0.4s ease,\\n color 0.4s ease,\\n box-shadow 0.4s ease,\\n transform 0.2s ease;\\n}\\n\\n.gradient-inset-button:hover {\\n background: #231942;\\n color: #ffffff;\\n box-shadow:\\n inset 0 0 0 4px #ff4d6d,\\n inset 0 0 0 8px #ff8fab,\\n inset 0 0 0 12px #c77dff,\\n inset 0 0 0 16px #7b2cbf;\\n}\\n\\n.gradient-inset-button:active {\\n transform: scale(0.96);\\n}\\n\\n.gradient-inset-button:focus-visible {\\n outline: 3px solid #c77dff;\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .gradient-inset-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Inset Gradient Hover 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":"558e2cd3-41a8-4d10-98c0-b4e6cada4516","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"bb911bc4-8910-4cd9-814c-c47f17a502aa","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"bde2ae35-bc0e-4d01-a989-f795b05bc680","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"37ac0ee1-6a1c-453f-9c30-70fe708af5ca","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"a63bf0db-899e-457f-959c-a3ba55d451d1","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: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.button-page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.gradient-inset-button {\\n width: 170px;\\n height: 60px;\\n border: none;\\n outline: none;\\n border-radius: 50px;\\n background: #ffffff;\\n color: #231942;\\n font-size: 18px;\\n font-weight: 600;\\n cursor: pointer;\\n transition:\\n background 0.4s ease,\\n color 0.4s ease,\\n box-shadow 0.4s ease,\\n transform 0.2s ease;\\n}\\n\\n.gradient-inset-button:hover {\\n background: #231942;\\n color: #ffffff;\\n box-shadow:\\n inset 0 0 0 4px #ff4d6d,\\n inset 0 0 0 8px #ff8fab,\\n inset 0 0 0 12px #c77dff,\\n inset 0 0 0 16px #7b2cbf;\\n}\\n\\n.gradient-inset-button:active {\\n transform: scale(0.96);\\n}\\n\\n.gradient-inset-button:focus-visible {\\n outline: 3px solid #c77dff;\\n outline-offset: 6px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .gradient-inset-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"064a5df1-f0cc-40b8-bfa7-2912143baaea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c1ef271d-31ed-4bc0-89f4-1ac4b38d17b0","type":"divider","props":{},"children":[]},{"id":"a2fe9b15-d366-419f-b1ec-66cc2070e486","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"110401bd-017a-495d-88d1-74bbfd8bd194","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":" file is the main entry page. It loads the CSS file, creates a centered layout using ","styles":{}},{"type":"text","text":"

","styles":{"code":true}},{"type":"text","text":", then places one button inside it.","styles":{}}],"children":[]},{"id":"91f2ee6b-714c-4135-9f79-6dcf92c81241","type":"procode","props":{"code":"

\n \n

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

\\n \\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5cd9388c-abbc-4fef-a28b-e05dfb9bb81a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses this class:","styles":{}}],"children":[]},{"id":"9974eb56-d73f-46ce-9e4f-837d56830d6b","type":"procode","props":{"code":"gradient-inset-button","language":"javascript","filename":"","files":"[{\"id\":\"16e1imwoy\",\"name\":\"code\",\"code\":\"gradient-inset-button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"782dc025-44c6-42bb-8860-5aa4552dbb3c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"That class is responsible for the full visual style, hover animation, active press effect, and focus state.","styles":{}}],"children":[]},{"id":"fcd81486-230f-43c3-b2e6-eb9a80c6d69c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style Flow\n\nThe ","styles":{}},{"type":"text","text":"/styles.css","styles":{"code":true}},{"type":"text","text":" file controls everything visually.","styles":{}}],"children":[]},{"id":"9d9a9ab0-6255-4c63-9b06-4538f585141f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"First, all elements use ","styles":{}},{"type":"text","text":"box-sizing: border-box","styles":{"code":true}},{"type":"text","text":" so width and height calculations stay stable.","styles":{}}],"children":[]},{"id":"738260d1-4003-4be9-b5e2-88e5b1b527c7","type":"procode","props":{"code":"* {\n box-sizing: border-box;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m0zuluad9\",\"name\":\"code\",\"code\":\"* {\\n box-sizing: border-box;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"054d4dd5-8bd1-4e35-a4a8-75b21ba61764","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then the ","styles":{}},{"type":"text","text":"body","styles":{"code":true}},{"type":"text","text":" removes default spacing and gives the page full viewport height.","styles":{}}],"children":[]},{"id":"b5e95f92-3bf1-4d2b-874a-4c7c7ca6f801","type":"procode","props":{"code":"body {\n margin: 0;\n min-height: 100vh;\n background: #fff;\n font-family: Arial, Helvetica, sans-serif;\n}","language":"javascript","filename":"","files":"[{\"id\":\"riv5nu2sm\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n min-height: 100vh;\\n background: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7319bb69-a3db-429f-9c7d-d1ecf2481525","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center Flow\n\nThe ","styles":{}},{"type":"text","text":".button-page","styles":{"code":true}},{"type":"text","text":" wrapper centers the button vertically and horizontally.","styles":{}}],"children":[]},{"id":"9cd8faeb-80e5-4b3f-adb2-3d906e6bce60","type":"procode","props":{"code":".button-page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"b9va7jy80\",\"name\":\"code\",\"code\":\".button-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":"0b15e442-22f5-4d19-81ea-e3379b14d8b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Default Flow\n\nThe button starts as a white rounded pill with dark purple text.","styles":{}}],"children":[]},{"id":"9d453a94-6401-47e6-b1b7-f13f33029cb5","type":"procode","props":{"code":".gradient-inset-button {\n width: 170px;\n height: 60px;\n border: none;\n outline: none;\n border-radius: 50px;\n background: #ffffff;\n color: #231942;\n font-size: 18px;\n font-weight: 600;\n cursor: pointer;\n}","language":"javascript","filename":"","files":"[{\"id\":\"x0aep26w2\",\"name\":\"code\",\"code\":\".gradient-inset-button {\\n width: 170px;\\n height: 60px;\\n border: none;\\n outline: none;\\n border-radius: 50px;\\n background: #ffffff;\\n color: #231942;\\n font-size: 18px;\\n font-weight: 600;\\n cursor: pointer;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eebbff03-1477-412d-9e6f-ce5fc2562b1d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Animation Flow\n\nWhen the user hovers the button, the background changes to dark purple and the text becomes white.","styles":{}}],"children":[]},{"id":"a257b58a-02df-4dd5-bdea-38f7589d27f8","type":"procode","props":{"code":".gradient-inset-button:hover {\n background: #231942;\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yoilwdqmd\",\"name\":\"code\",\"code\":\".gradient-inset-button:hover {\\n background: #231942;\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c8c52104-4ae9-4d3c-b1b5-58c31696a0a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The layered inset border effect comes from multiple ","styles":{}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":" layers.","styles":{}}],"children":[]},{"id":"8f68d4e3-e9ad-418d-a632-49ddbf9ededa","type":"procode","props":{"code":"box-shadow:\n inset 0 0 0 4px #ff4d6d,\n inset 0 0 0 8px #ff8fab,\n inset 0 0 0 12px #c77dff,\n inset 0 0 0 16px #7b2cbf;","language":"javascript","filename":"","files":"[{\"id\":\"p70zkfbpc\",\"name\":\"code\",\"code\":\"box-shadow:\\n inset 0 0 0 4px #ff4d6d,\\n inset 0 0 0 8px #ff8fab,\\n inset 0 0 0 12px #c77dff,\\n inset 0 0 0 16px #7b2cbf;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2fea92f6-5008-4fe4-be68-86962bebacae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each layer is larger than the previous one:","styles":{}}],"children":[]},{"id":"4867831f-546a-48e5-85af-eba43ce31141","type":"procode","props":{"code":"4px = first inner ring\n8px = second inner ring\n12px = third inner ring\n16px = fourth inner ring","language":"javascript","filename":"","files":"[{\"id\":\"bzm26ihgn\",\"name\":\"code\",\"code\":\"4px = first inner ring\\n8px = second inner ring\\n12px = third inner ring\\n16px = fourth inner ring\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ddc4d562-b383-452a-9cc6-017fac4309e6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Transition Flow\n\nThe animation is smooth because the button transitions ","styles":{}},{"type":"text","text":"background","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"color","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"transform","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"71e1d8b5-9676-4791-8048-5883c85b479a","type":"procode","props":{"code":"transition:\n background 0.4s ease,\n color 0.4s ease,\n box-shadow 0.4s ease,\n transform 0.2s ease;","language":"javascript","filename":"","files":"[{\"id\":\"3pgy2rixp\",\"name\":\"code\",\"code\":\"transition:\\n background 0.4s ease,\\n color 0.4s ease,\\n box-shadow 0.4s ease,\\n transform 0.2s ease;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"aa726041-d38e-4669-9122-ef2286d6a4fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Click Flow\n\nWhen the button is clicked, it scales down slightly.","styles":{}}],"children":[]},{"id":"1b125b1b-09a1-4f5e-b92e-3b96792b3090","type":"procode","props":{"code":".gradient-inset-button:active {\n transform: scale(0.96);\n}","language":"javascript","filename":"","files":"[{\"id\":\"rebgny4xe\",\"name\":\"code\",\"code\":\".gradient-inset-button:active {\\n transform: scale(0.96);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"57fb3a5c-2525-478e-ad85-7243524ae25d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Keyboard Focus Flow\n\nWhen navigating with keyboard, the button shows a visible focus outline.","styles":{}}],"children":[]},{"id":"645f6488-3306-401c-bee8-91d7396d319d","type":"procode","props":{"code":".gradient-inset-button:focus-visible {\n outline: 3px solid #c77dff;\n outline-offset: 6px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"gkwhkuipe\",\"name\":\"code\",\"code\":\".gradient-inset-button:focus-visible {\\n outline: 3px solid #c77dff;\\n outline-offset: 6px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec89b20b-b699-4693-b162-6eb83cb02704","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow\n\nFor users who prefer reduced motion, the animation is disabled.","styles":{}}],"children":[]},{"id":"9ad1dda9-a1e2-4d62-984f-043a0366f18c","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .gradient-inset-button {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"vulzin9ng\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .gradient-inset-button {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4c81ad7c-6c88-45d0-a111-5bd8ebd75141","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]