Gradient Press Button

[{"id":"d6ae6401-2f9f-4021-8342-773261c0b4f9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"8be78e44-e0dd-4c14-b4a8-de270357500b","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: grid;\\n place-items: center;\\n}\\n\\n.gradient-button {\\n display: inline-block;\\n padding: 12px 28px;\\n margin: 10px;\\n\\n border: none;\\n border-radius: 40px;\\n background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);\\n box-shadow: 0 4px 0 #0072ff;\\n\\n color: #ffffff;\\n font-size: 24px;\\n font-weight: 700;\\n text-transform: uppercase;\\n\\n cursor: pointer;\\n\\n transition:\\n transform 0.2s ease,\\n box-shadow 0.2s ease,\\n background-image 0.2s ease;\\n}\\n\\n.gradient-button:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 6px 0 #0072ff;\\n}\\n\\n.gradient-button:active {\\n transform: translateY(2px);\\n box-shadow: 0 1px 0 #0072ff;\\n background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Gradient Press 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":"873be01b-d8e3-43e1-8ca2-c51c00dda335","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7d43dc9c-8ddb-4026-b86f-43bab6550717","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"81fd2ad2-22d9-452e-b22b-c008f9f05741","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8460da66-9510-45e3-b05d-c44308e2331e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"843fa076-9418-4e86-9e4b-a9d9060b5eaf","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: grid;\\n place-items: center;\\n}\\n\\n.gradient-button {\\n display: inline-block;\\n padding: 12px 28px;\\n margin: 10px;\\n\\n border: none;\\n border-radius: 40px;\\n background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);\\n box-shadow: 0 4px 0 #0072ff;\\n\\n color: #ffffff;\\n font-size: 24px;\\n font-weight: 700;\\n text-transform: uppercase;\\n\\n cursor: pointer;\\n\\n transition:\\n transform 0.2s ease,\\n box-shadow 0.2s ease,\\n background-image 0.2s ease;\\n}\\n\\n.gradient-button:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 6px 0 #0072ff;\\n}\\n\\n.gradient-button:active {\\n transform: translateY(2px);\\n box-shadow: 0 1px 0 #0072ff;\\n background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2f48f0b9-93d5-4030-bb28-9d8b669c2dcb","type":"divider","props":{},"children":[]},{"id":"2932ab5d-af1b-4911-a577-7da250921f2c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"681e2101-47c0-48ec-beec-778cc1bd1c9d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is a gradient press button. It uses a blue gradient background, white uppercase text, pill shape, and a blue bottom shadow to create a raised button effect.","styles":{}}],"children":[]},{"id":"3c4caf7d-cbd8-4f2a-8c64-eac455762394","type":"procode","props":{"code":".gradient-button {\n border-radius: 40px;\n background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);\n box-shadow: 0 4px 0 #0072ff;\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tyrzaez2u\",\"name\":\"code\",\"code\":\".gradient-button {\\n border-radius: 40px;\\n background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);\\n box-shadow: 0 4px 0 #0072ff;\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de6f9613-5749-42e8-8f62-8c8e4f968ac3","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 using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the button in the middle.","styles":{}}],"children":[]},{"id":"cf7a8998-b5ba-4312-9be2-60a0fea3307f","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"j600t28m2\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"96d4d922-a452-4981-b027-5ab3d7d7c657","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".gradient-button","styles":{"code":true}},{"type":"text","text":" is the main button element. It removes the default border, uses a pill radius, and creates spacing with padding.","styles":{}}],"children":[]},{"id":"3530ebce-d271-4602-9d79-44bb6a8cac87","type":"procode","props":{"code":".gradient-button {\n display: inline-block;\n padding: 12px 28px;\n margin: 10px;\n\n border: none;\n border-radius: 40px;\n background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);\n box-shadow: 0 4px 0 #0072ff;\n\n cursor: pointer;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bb82k6gbe\",\"name\":\"code\",\"code\":\".gradient-button {\\n display: inline-block;\\n padding: 12px 28px;\\n margin: 10px;\\n\\n border: none;\\n border-radius: 40px;\\n background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);\\n box-shadow: 0 4px 0 #0072ff;\\n\\n cursor: pointer;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f700c961-28fc-49ed-876d-58dcd05adcaf","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Style\n","styles":{"bold":true}},{"type":"text","text":"The text is white, large, bold, and uppercase.","styles":{}}],"children":[]},{"id":"e299e6a5-17ef-44e6-a7da-60b27b2230f1","type":"procode","props":{"code":".gradient-button {\n color: #ffffff;\n font-size: 24px;\n font-weight: 700;\n text-transform: uppercase;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ig5ji935o\",\"name\":\"code\",\"code\":\".gradient-button {\\n color: #ffffff;\\n font-size: 24px;\\n font-weight: 700;\\n text-transform: uppercase;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c194bcda-6b81-4fda-abe8-7e2d8fb5e210","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Raised State\n","styles":{"bold":true}},{"type":"text","text":"The button feels raised because of the bottom shadow. The shadow sits ","styles":{}},{"type":"text","text":"4px","styles":{"code":true}},{"type":"text","text":" below the button.","styles":{}}],"children":[]},{"id":"b03a7a7a-0c79-471d-93cd-d9fa102e57f5","type":"procode","props":{"code":".gradient-button {\n box-shadow: 0 4px 0 #0072ff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"r02drglr2\",\"name\":\"code\",\"code\":\".gradient-button {\\n box-shadow: 0 4px 0 #0072ff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4d23cc3c-dc28-4328-942b-0de4665533f4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Lift Effect\n","styles":{"bold":true}},{"type":"text","text":"On hover, the button moves upward by ","styles":{}},{"type":"text","text":"2px","styles":{"code":true}},{"type":"text","text":" and the shadow becomes taller. This makes the button feel lifted.","styles":{}}],"children":[]},{"id":"23831df2-eb4e-456d-94ff-c317689345c7","type":"procode","props":{"code":".gradient-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 0 #0072ff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bff17e0nr\",\"name\":\"code\",\"code\":\".gradient-button:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 6px 0 #0072ff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9678b2a7-1a95-4668-bf00-f9856d7d8547","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Pressed Effect\n","styles":{"bold":true}},{"type":"text","text":"On click, the button moves down by ","styles":{}},{"type":"text","text":"2px","styles":{"code":true}},{"type":"text","text":", the shadow becomes smaller, and the gradient direction reverses. This creates the pressed feeling.","styles":{}}],"children":[]},{"id":"05a2ca70-d7a4-4517-942c-e2585e93e0f1","type":"procode","props":{"code":".gradient-button:active {\n transform: translateY(2px);\n box-shadow: 0 1px 0 #0072ff;\n background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);\n}","language":"javascript","filename":"","files":"[{\"id\":\"qv2ea7qb0\",\"name\":\"code\",\"code\":\".gradient-button:active {\\n transform: translateY(2px);\\n box-shadow: 0 1px 0 #0072ff;\\n background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4112eb61-8499-495e-9122-5e931cfecba9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The movement, shadow, and gradient change use a ","styles":{}},{"type":"text","text":"0.2s ease","styles":{"code":true}},{"type":"text","text":" transition.","styles":{}}],"children":[]},{"id":"9155c2a6-2814-4911-b44e-d4f497f81786","type":"procode","props":{"code":".gradient-button {\n transition:\n transform 0.2s ease,\n box-shadow 0.2s ease,\n background-image 0.2s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"0kzh0or4o\",\"name\":\"code\",\"code\":\".gradient-button {\\n transition:\\n transform 0.2s ease,\\n box-shadow 0.2s ease,\\n background-image 0.2s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4639ee7c-9bf5-4ccd-9e99-ddc6d187d47a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main interaction flow. The button lifts on hover, then compresses on active click.","styles":{}}],"children":[]},{"id":"b1e648a8-2e58-4e2e-accc-fd835dceee79","type":"procode","props":{"code":".gradient-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 0 #0072ff;\n}\n\n.gradient-button:active {\n transform: translateY(2px);\n box-shadow: 0 1px 0 #0072ff;\n background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);\n}","language":"javascript","filename":"","files":"[{\"id\":\"1qvxnom4z\",\"name\":\"code\",\"code\":\".gradient-button:hover {\\n transform: translateY(-2px);\\n box-shadow: 0 6px 0 #0072ff;\\n}\\n\\n.gradient-button:active {\\n transform: translateY(2px);\\n box-shadow: 0 1px 0 #0072ff;\\n background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2fb29708-54d4-403a-9f8b-530f97c61d4a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":" Creates The 3D Feel\n","styles":{"bold":true}},{"type":"text","text":"The button itself does not have a real 3D shape. The bottom ","styles":{}},{"type":"text","text":"box-shadow","styles":{"code":true}},{"type":"text","text":" acts like a fake button base.","styles":{}}],"children":[]},{"id":"282591d7-c57b-49f5-8b8f-c94e97600334","type":"procode","props":{"code":".gradient-button {\n box-shadow: 0 4px 0 #0072ff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"8tz58k5pn\",\"name\":\"code\",\"code\":\".gradient-button {\\n box-shadow: 0 4px 0 #0072ff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4bc5b310-aee5-42f8-83a8-b95200b4af07","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"translateY","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"translateY(-2px)","styles":{"code":true}},{"type":"text","text":" makes the button lift upward on hover. ","styles":{}},{"type":"text","text":"translateY(2px)","styles":{"code":true}},{"type":"text","text":" makes it move downward when pressed.","styles":{}}],"children":[]},{"id":"5c40bf10-454f-4855-920e-f4767b622666","type":"procode","props":{"code":".gradient-button:hover {\n transform: translateY(-2px);\n}\n\n.gradient-button:active {\n transform: translateY(2px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"xjedq74ou\",\"name\":\"code\",\"code\":\".gradient-button:hover {\\n transform: translateY(-2px);\\n}\\n\\n.gradient-button:active {\\n transform: translateY(2px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c4693427-8ece-4774-b5b0-5242c036c07a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the button animation speed here:","styles":{}}],"children":[]},{"id":"970d6fab-ef09-41ab-8671-98ffb80d7ded","type":"procode","props":{"code":".gradient-button {\n transition:\n transform 0.2s ease,\n box-shadow 0.2s ease,\n background-image 0.2s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hhua79xsf\",\"name\":\"code\",\"code\":\".gradient-button {\\n transition:\\n transform 0.2s ease,\\n box-shadow 0.2s ease,\\n background-image 0.2s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7597bd3a-7099-462f-9fd6-13c4fb07740e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the gradient colors here:","styles":{}}],"children":[]},{"id":"c701fc26-45fa-4d38-8396-23a1f19be5b8","type":"procode","props":{"code":".gradient-button {\n background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);\n}","language":"javascript","filename":"","files":"[{\"id\":\"3g5cczaf5\",\"name\":\"code\",\"code\":\".gradient-button {\\n background-image: linear-gradient(to bottom right, #00c6ff, #0072ff);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6e189b6e-fa32-4b2e-92e8-a68cd0b0c5c6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the pressed gradient colors here:","styles":{}}],"children":[]},{"id":"2f7b02af-046a-4683-bbdc-d020f4cef838","type":"procode","props":{"code":".gradient-button:active {\n background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);\n}","language":"javascript","filename":"","files":"[{\"id\":\"8rajukzxe\",\"name\":\"code\",\"code\":\".gradient-button:active {\\n background-image: linear-gradient(to bottom right, #0072ff, #00c6ff);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d421d2de-2aa3-4493-967d-03899ece217f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the shadow color here:","styles":{}}],"children":[]},{"id":"4210c031-3c4a-4a3f-9573-6691db15d028","type":"procode","props":{"code":".gradient-button {\n box-shadow: 0 4px 0 #0072ff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"x1eazfa75\",\"name\":\"code\",\"code\":\".gradient-button {\\n box-shadow: 0 4px 0 #0072ff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7a954547-467f-46fa-a329-ee13faa15164","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the button spacing here:","styles":{}}],"children":[]},{"id":"a403c03c-6eab-43cb-83a2-5ebb258f72a4","type":"procode","props":{"code":".gradient-button {\n padding: 12px 28px;\n margin: 10px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ddy2ug1dj\",\"name\":\"code\",\"code\":\".gradient-button {\\n padding: 12px 28px;\\n margin: 10px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7bda5837-ccef-46dc-ac9f-03b05179773f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the pill roundness here:","styles":{}}],"children":[]},{"id":"6c4446ed-4b86-4d99-967a-d65f06a9775b","type":"procode","props":{"code":".gradient-button {\n border-radius: 40px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wsfkgxj0j\",\"name\":\"code\",\"code\":\".gradient-button {\\n border-radius: 40px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"81b2fa4b-4c02-4541-8671-389b2f32f27c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text size here:","styles":{}}],"children":[]},{"id":"ba70364a-a8cb-4ca6-822d-7abfecede795","type":"procode","props":{"code":".gradient-button {\n font-size: 24px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"26s6l1fvu\",\"name\":\"code\",\"code\":\".gradient-button {\\n font-size: 24px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"08396705-71eb-4d7f-a678-5ea502db2646","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the button text inside ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a0bb0be0-9200-4d71-bc82-f407be5a9294","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"lkgis855x\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a3726689-9e0a-434c-ade9-fb947fad2f37","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]