Rotate Plus Button

[{"id":"f1125c83-6c8e-41ba-bd0c-1aaede300c2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c93a4ef7-e3a3-42ef-90f6-2c9fe0bf41dd","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: #000;\\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.rotate-plus-button {\\n padding: 0;\\n border: none;\\n background: transparent;\\n cursor: pointer;\\n outline: none;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n transition: transform 300ms ease;\\n}\\n\\n.rotate-plus-button:hover {\\n transform: rotate(90deg);\\n}\\n\\n.rotate-plus-icon {\\n stroke: #a1a1aa;\\n fill: none;\\n transition:\\n fill 300ms ease,\\n stroke 300ms ease;\\n}\\n\\n.rotate-plus-button:hover .rotate-plus-icon {\\n fill: #27272a;\\n}\\n\\n.rotate-plus-button:active .rotate-plus-icon {\\n stroke: #e4e4e7;\\n fill: #52525b;\\n transition-duration: 0ms;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .rotate-plus-button,\\n .rotate-plus-icon {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Rotate Plus 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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"f4790976-c93e-4246-a6e9-1263a55a7ea6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"763605a7-bcbf-4cf7-a27e-b79aa4442827","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"9bd27200-f0eb-4004-a1a9-64c41f4fbbd6","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2879fe88-6f8b-4d10-a861-f90f181387b0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"32268ab2-7c27-4bc8-b049-39b1a616b861","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: #000;\\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.rotate-plus-button {\\n padding: 0;\\n border: none;\\n background: transparent;\\n cursor: pointer;\\n outline: none;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n transition: transform 300ms ease;\\n}\\n\\n.rotate-plus-button:hover {\\n transform: rotate(90deg);\\n}\\n\\n.rotate-plus-icon {\\n stroke: #a1a1aa;\\n fill: none;\\n transition:\\n fill 300ms ease,\\n stroke 300ms ease;\\n}\\n\\n.rotate-plus-button:hover .rotate-plus-icon {\\n fill: #27272a;\\n}\\n\\n.rotate-plus-button:active .rotate-plus-icon {\\n stroke: #e4e4e7;\\n fill: #52525b;\\n transition-duration: 0ms;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .rotate-plus-button,\\n .rotate-plus-icon {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bc91513c-7102-4f0e-b807-652fe753888e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"44821f28-0d1e-4618-abef-cbc2739fbe7c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2a0a44f6-1005-47f2-8727-ba1dee5aedab","type":"divider","props":{},"children":[]},{"id":"9fae065d-4ac4-4cd7-9f72-aeeea77bb7e0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"e224f511-acc1-41a4-a440-e30266a9dbb8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original Tailwind classes are replaced with custom CSS classes.","styles":{}}],"children":[]},{"id":"ff38bf08-7fd7-45bb-915b-a1ebf766a060","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"r0fpa0glu\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"962142ab-defc-4f8a-a8a6-a68480891d41","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button controls the rotation.\n\nThe SVG controls the plus circle icon color.","styles":{}}],"children":[]},{"id":"06d200a3-d6d7-4f13-b75e-3571d2dbf6ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"a3590796-a5ad-4972-aecf-381269841985","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 centers the button in the viewport.","styles":{}}],"children":[]},{"id":"ab652fea-cecb-43eb-9686-d5c590fe191f","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\":\"t81tjvkbq\",\"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":"3626ec3a-7074-4e15-84a5-f01448309f34","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base","styles":{}}],"children":[]},{"id":"a3d3cb00-f97a-457a-8483-832e9c791dbd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The default button styling is removed.","styles":{}}],"children":[]},{"id":"31297b07-bb5c-4def-b6a6-ab205a463b28","type":"procode","props":{"code":".rotate-plus-button {\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n outline: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9lq5ktlvn\",\"name\":\"code\",\"code\":\".rotate-plus-button {\\n padding: 0;\\n border: none;\\n background: transparent;\\n cursor: pointer;\\n outline: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87b92eb8-8a80-4b47-bcc7-097ea590d0bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This keeps only the SVG icon visible.","styles":{}}],"children":[]},{"id":"f1bf1bed-ea56-4c5d-987c-59b5443f43e7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Rotate","styles":{}}],"children":[]},{"id":"352a383a-9c79-4c12-9aff-b1f1ca65280e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original ","styles":{}},{"type":"text","text":"hover:rotate-90","styles":{"code":true}},{"type":"text","text":" is converted to plain CSS.","styles":{}}],"children":[]},{"id":"6fb08ae7-07a9-4095-912d-7755ee3f62de","type":"procode","props":{"code":".rotate-plus-button:hover {\n transform: rotate(90deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"2xumt619b\",\"name\":\"code\",\"code\":\".rotate-plus-button:hover {\\n transform: rotate(90deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d767fabf-346d-4d9b-93ed-42dced1bf975","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The rotation duration is ","styles":{}},{"type":"text","text":"300ms","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"b10f9fe6-c193-49ce-a2b6-f83adcda25a0","type":"procode","props":{"code":"transition: transform 300ms ease;","language":"javascript","filename":"","files":"[{\"id\":\"ljz14m0cq\",\"name\":\"code\",\"code\":\"transition: transform 300ms ease;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b9b08a01-8211-4347-b62e-f59e589b170a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Default Color","styles":{}}],"children":[]},{"id":"a74dea3b-8b07-4599-99e5-74d109b425dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original ","styles":{}},{"type":"text","text":"stroke-zinc-400","styles":{"code":true}},{"type":"text","text":" becomes:","styles":{}}],"children":[]},{"id":"c7cae05f-d1f2-42e8-91aa-4e6961390d5b","type":"procode","props":{"code":"stroke: #a1a1aa;","language":"javascript","filename":"","files":"[{\"id\":\"3mee4ne7u\",\"name\":\"code\",\"code\":\"stroke: #a1a1aa;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"983cb970-26e3-4c8a-a24c-5f0978964e11","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The icon starts with no fill.","styles":{}}],"children":[]},{"id":"63ab02a5-0740-4163-8f9c-18f5abc30cdb","type":"procode","props":{"code":"fill: none;","language":"javascript","filename":"","files":"[{\"id\":\"186tg93sz\",\"name\":\"code\",\"code\":\"fill: none;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0aa46fcf-3ba3-4e9c-9ba5-209687520892","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Fill","styles":{}}],"children":[]},{"id":"46f37143-9cfa-424a-8175-5c7a765f5b91","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original ","styles":{}},{"type":"text","text":"group-hover:fill-zinc-800","styles":{"code":true}},{"type":"text","text":" becomes:","styles":{}}],"children":[]},{"id":"af09fde2-673a-4d24-a310-017738762fd8","type":"procode","props":{"code":".rotate-plus-button:hover .rotate-plus-icon {\n fill: #27272a;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9rbznb8g5\",\"name\":\"code\",\"code\":\".rotate-plus-button:hover .rotate-plus-icon {\\n fill: #27272a;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"021c6ac9-65ba-4a09-baa3-00905a4815b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active State","styles":{}}],"children":[]},{"id":"9fd436d5-8248-4029-be04-463d00f2817b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original active colors are converted to CSS.","styles":{}}],"children":[]},{"id":"03dda472-c226-4a02-b473-d0d496d42eee","type":"procode","props":{"code":".rotate-plus-button:active .rotate-plus-icon {\n stroke: #e4e4e7;\n fill: #52525b;\n transition-duration: 0ms;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vqwrz94of\",\"name\":\"code\",\"code\":\".rotate-plus-button:active .rotate-plus-icon {\\n stroke: #e4e4e7;\\n fill: #52525b;\\n transition-duration: 0ms;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f4d74996-891f-4f9c-939c-728220fd189b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]