Comic Pop Button

[{"id":"4cd5cc07-15e0-4fcd-9056-a49c0ed93556","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2f89490d-f2f8-479d-b8c3-a312c9d9a10e","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 display: grid;\\n place-items: center;\\n background: #fff7ed;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.comic-button-row {\\n display: flex;\\n flex-wrap: wrap;\\n gap: 16px;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.comic-pop-btn {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n height: 48px;\\n padding: 0 24px;\\n\\n overflow: hidden;\\n\\n border: 2px solid #172554;\\n border-radius: 999px;\\n\\n color: #172554;\\n font-size: 20px;\\n font-weight: 800;\\n line-height: 1;\\n white-space: nowrap;\\n\\n cursor: pointer;\\n\\n transition:\\n transform 150ms ease,\\n box-shadow 150ms ease,\\n opacity 150ms ease;\\n}\\n\\n.comic-pop-orange {\\n background: #5eead4;\\n}\\n\\n.comic-pop-purple {\\n background: #f9a8d4;\\n}\\n\\n.comic-pop-btn:not(:disabled):hover {\\n transform: translateY(-4px);\\n box-shadow: 0 4px 0 0 #172554;\\n}\\n\\n.comic-pop-btn:not(:disabled):active {\\n transform: translateY(0);\\n box-shadow: none;\\n}\\n\\n.comic-pop-label {\\n position: relative;\\n z-index: 2;\\n}\\n\\n.comic-pop-shine {\\n position: absolute;\\n top: 50%;\\n left: -100%;\\n z-index: 1;\\n\\n width: 64px;\\n height: 96px;\\n\\n background: rgba(255, 255, 255, 0.65);\\n\\n transform: translateY(-50%) rotate(12deg);\\n\\n transition: left 500ms ease-in-out;\\n}\\n\\n.comic-pop-btn:not(:disabled):hover .comic-pop-shine {\\n left: 200%;\\n}\\n\\n.comic-pop-btn:disabled,\\n.comic-pop-btn.is-disabled {\\n opacity: 0.5;\\n cursor: not-allowed;\\n pointer-events: none;\\n}\\n\\n.comic-pop-btn:focus-visible {\\n outline: 3px solid #172554;\\n outline-offset: 4px;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Comic Pop Button\\n \\n \\n \\n \\n

\\n \\n Click me!\\n \\n \\n\\n \\n Click me!\\n \\n

\\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const comicButtons = document.querySelectorAll(\\\".comic-pop-btn\\\");\\n\\ncomicButtons.forEach((button) => {\\n button.addEventListener(\\\"click\\\", () => {\\n if (button.disabled) return;\\n\\n const message = button.dataset.alert;\\n\\n if (message) {\\n alert(message);\\n }\\n });\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"36e5a5a5-414c-4d9f-a787-c6dc4a126d27","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2f19ac55-60dd-47d3-85c5-ed414ec83eeb","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"406cec20-2c16-42fb-9d0f-1acc305842ad","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n Click me!\\n \\n \\n\\n \\n Click me!\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6bba04cd-67f0-4082-bb55-f6b00c23d517","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"70f33b97-200f-408b-b65b-9c42e5331c5d","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 display: grid;\\n place-items: center;\\n background: #fff7ed;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.comic-button-row {\\n display: flex;\\n flex-wrap: wrap;\\n gap: 16px;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.comic-pop-btn {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n height: 48px;\\n padding: 0 24px;\\n\\n overflow: hidden;\\n\\n border: 2px solid #172554;\\n border-radius: 999px;\\n\\n color: #172554;\\n font-size: 20px;\\n font-weight: 800;\\n line-height: 1;\\n white-space: nowrap;\\n\\n cursor: pointer;\\n\\n transition:\\n transform 150ms ease,\\n box-shadow 150ms ease,\\n opacity 150ms ease;\\n}\\n\\n.comic-pop-orange {\\n background: #5eead4;\\n}\\n\\n.comic-pop-purple {\\n background: #f9a8d4;\\n}\\n\\n.comic-pop-btn:not(:disabled):hover {\\n transform: translateY(-4px);\\n box-shadow: 0 4px 0 0 #172554;\\n}\\n\\n.comic-pop-btn:not(:disabled):active {\\n transform: translateY(0);\\n box-shadow: none;\\n}\\n\\n.comic-pop-label {\\n position: relative;\\n z-index: 2;\\n}\\n\\n.comic-pop-shine {\\n position: absolute;\\n top: 50%;\\n left: -100%;\\n z-index: 1;\\n\\n width: 64px;\\n height: 96px;\\n\\n background: rgba(255, 255, 255, 0.65);\\n\\n transform: translateY(-50%) rotate(12deg);\\n\\n transition: left 500ms ease-in-out;\\n}\\n\\n.comic-pop-btn:not(:disabled):hover .comic-pop-shine {\\n left: 200%;\\n}\\n\\n.comic-pop-btn:disabled,\\n.comic-pop-btn.is-disabled {\\n opacity: 0.5;\\n cursor: not-allowed;\\n pointer-events: none;\\n}\\n\\n.comic-pop-btn:focus-visible {\\n outline: 3px solid #172554;\\n outline-offset: 4px;\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2b2b5847-7abe-4e11-a18b-965a51d4b6f9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"5899bed7-7357-4f36-aaf0-d30ea3ee53bf","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const comicButtons = document.querySelectorAll(\\\".comic-pop-btn\\\");\\n\\ncomicButtons.forEach((button) => {\\n button.addEventListener(\\\"click\\\", () => {\\n if (button.disabled) return;\\n\\n const message = button.dataset.alert;\\n\\n if (message) {\\n alert(message);\\n }\\n });\\n});\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9c08dc1f-7211-4c4d-8a9a-4b7d1e3e108a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"b89c7cbd-f485-4308-a494-e37dbe3d6e64","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e4392db6-5073-486b-9340-5e41d4b6e742","type":"divider","props":{},"children":[]},{"id":"16228e26-ef1e-4630-a77a-ea9e71b9a792","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"f5f7f3de-5c8c-442e-85ef-e946be86755b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"94657734-a598-4a57-a7ad-57f67d04c123","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Name\n","styles":{"bold":true}},{"type":"text","text":"This is called ","styles":{}},{"type":"text","text":"Comic Pop Button","styles":{"bold":true}},{"type":"text","text":" because it uses a bold cartoon border, playful colors, and a pop-up hover effect.","styles":{}}],"children":[]},{"id":"bc6e66c6-b6ad-4c68-b3aa-c3f4473fb9fe","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The button uses a pill shape, thick dark border, bold text, orange/purple background colors, and a hard shadow on hover.","styles":{}}],"children":[]},{"id":"be9687d3-e03c-48da-892e-4ddb41942ded","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Interaction\n","styles":{"bold":true}},{"type":"text","text":"The first button is active. It moves upward on hover, shows a shadow, and displays an alert when clicked. The second button is disabled, faded, and cannot be clicked.","styles":{}}],"children":[]},{"id":"4f23ebc4-59d3-458b-9102-a2cfc8c9c27f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The hover movement and shine sweep use CSS ","styles":{}},{"type":"text","text":"transition","styles":{"code":true}},{"type":"text","text":", which controls how property changes animate between states.","styles":{}}],"children":[]},{"id":"5bf2f032-6f5a-4d13-bc94-f52c29b49410","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code","styles":{"bold":true}}],"children":[]},{"id":"12394e05-3a27-4eac-916f-7b3ae36fbb08","type":"procode","props":{"code":".comic-pop-btn:not(:disabled):hover {\n transform: translateY(-4px);\n box-shadow: 0 4px 0 0 #262626;\n}","language":"javascript","filename":"","files":"[{\"id\":\"asj80t9sf\",\"name\":\"code\",\"code\":\".comic-pop-btn:not(:disabled):hover {\\n transform: translateY(-4px);\\n box-shadow: 0 4px 0 0 #262626;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de1ee5f1-8ad2-481b-8ccf-f71ffcb7304f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the cartoon lift effect.","styles":{}}],"children":[]},{"id":"878d5791-5856-40da-87e6-a5777719ddcf","type":"procode","props":{"code":".comic-pop-btn:not(:disabled):hover .comic-pop-shine {\n left: 200%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"z8ubme7ia\",\"name\":\"code\",\"code\":\".comic-pop-btn:not(:disabled):hover .comic-pop-shine {\\n left: 200%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9f89a35d-d500-499f-9f8a-cef85f5cbfd1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This moves the white highlight across the button.","styles":{}}],"children":[]},{"id":"fbdf4ca6-b0fc-4319-95ed-dcd2df015449","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change this value to make the hover movement faster or slower:","styles":{}}],"children":[]},{"id":"3a867e9a-36d7-4b25-9c2c-ee72f198f6d8","type":"procode","props":{"code":"transition:\n transform 150ms ease,\n box-shadow 150ms ease,\n opacity 150ms ease;","language":"javascript","filename":"","files":"[{\"id\":\"5zq4bhx95\",\"name\":\"code\",\"code\":\"transition:\\n transform 150ms ease,\\n box-shadow 150ms ease,\\n opacity 150ms ease;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b90ebf05-028e-4ab7-9486-2054108938f1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change this value to control the shine speed:","styles":{}}],"children":[]},{"id":"121ef8b3-a2db-4db3-9d89-461344cd41a5","type":"procode","props":{"code":"transition: left 500ms ease-in-out;","language":"javascript","filename":"","files":"[{\"id\":\"b8s1sg33s\",\"name\":\"code\",\"code\":\"transition: left 500ms ease-in-out;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a2386283-27c4-4fa2-8264-865b68e1042f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the button colors here:","styles":{}}],"children":[]},{"id":"5c52e8e9-3cb6-4b5e-a7e6-8f978c515d52","type":"procode","props":{"code":".comic-pop-orange {\n background: #fb923c;\n}\n\n.comic-pop-purple {\n background: #c084fc;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ld28qxa7b\",\"name\":\"code\",\"code\":\".comic-pop-orange {\\n background: #5eead4;\\n}\\n\\n.comic-pop-purple {\\n background: #f9a8d4;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a9d335b8-7b6b-40e0-af26-f0bd47cb3557","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 here:","styles":{}}],"children":[]},{"id":"63cd3528-d292-4186-9dff-8997f44f10d0","type":"procode","props":{"code":"Click me!","language":"javascript","filename":"","files":"[{\"id\":\"tynnrlen6\",\"name\":\"code\",\"code\":\"Click me!\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9577b656-ce8a-443a-b73e-50b965e18b3c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"The click message is controlled here:","styles":{}}],"children":[]},{"id":"1c9ad370-d6d1-4070-961a-0b7953c3f0c6","type":"procode","props":{"code":"data-alert=\"Button clicked!\"","language":"javascript","filename":"","files":"[{\"id\":\"dj3ppd6mb\",\"name\":\"code\",\"code\":\"data-alert=\\\"Button clicked!\\\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30f6868a-72d3-4ca4-ad56-c2646b8ff158","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"and triggered here:","styles":{}}],"children":[]},{"id":"4a54cdd9-30db-4f46-a943-8cdff862bff8","type":"procode","props":{"code":"alert(message);","language":"javascript","filename":"","files":"[{\"id\":\"snxhsd1nn\",\"name\":\"code\",\"code\":\"alert(message);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5e97f06b-e5d2-4622-8420-8a7caa710fcb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]