Shrink Reveal Button

[{"id":"200c3fb6-f4a9-47ef-b93c-3e7decfd04f1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"da6257bd-bf83-4724-9143-073876364ffb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e5c69c5e-462e-45cb-a026-761ebc43b330","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 font-family: Arial, Helvetica, sans-serif;\\n background: #000;\\n}\\n\\n.preview {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.shrink-button {\\n display: inline-flex;\\n align-items: center;\\n gap: 15px;\\n\\n height: 53px;\\n padding: 0 9px 0 23px;\\n border: 0;\\n border-radius: 999px;\\n\\n background: #ffffff;\\n color: #171717;\\n cursor: pointer;\\n\\n font-size: 20px;\\n font-weight: 600;\\n line-height: 1;\\n\\n transform: scale(1);\\n transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);\\n will-change: transform;\\n}\\n\\n.shrink-button:hover {\\n transform: scale(1.06);\\n}\\n\\n.shrink-button:active {\\n transform: scale(0.98);\\n}\\n\\n.button-text {\\n position: relative;\\n z-index: 2;\\n}\\n\\n.button-orb {\\n position: relative;\\n width: 36px;\\n height: 36px;\\n display: grid;\\n place-items: center;\\n border-radius: 999px;\\n flex-shrink: 0;\\n\\n overflow: hidden;\\n isolation: isolate;\\n transform: translateZ(0);\\n}\\n\\n.orb {\\n position: absolute;\\n inset: 0;\\n\\n display: grid;\\n place-items: center;\\n\\n border-radius: 999px;\\n\\n transform-origin: center;\\n will-change: transform;\\n backface-visibility: hidden;\\n\\n transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.orb-black {\\n background: #101010;\\n z-index: 2;\\n transform: translateZ(0) scale(1);\\n}\\n\\n.orb-purple {\\n background: #7c3aed;\\n z-index: 1;\\n transform: translateZ(0) scale(0.001);\\n}\\n\\n.arrow-icon {\\n width: 20px;\\n height: 20px;\\n transform: translateX(1px);\\n}\\n\\n.arrow-icon path {\\n fill: none;\\n stroke: #ffffff;\\n stroke-width: 3.2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n}\\n\\n.shrink-button:hover .orb-black {\\n transform: translateZ(0) scale(0.001);\\n}\\n\\n.shrink-button:hover .orb-purple {\\n transform: translateZ(0) scale(1);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .shrink-button,\\n .orb {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Shrink Reveal Button\\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","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"302b6104-0906-4029-baa3-b09fc00c8ea3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1a8d93e7-fc40-4cd8-9adb-8d5cd6cf9787","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"7549b337-6558-408f-8180-da7275f02952","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a91ff8c-6428-4c25-b352-89444f23d596","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"6a7add79-4671-4a3a-bb51-51d480efb236","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 font-family: Arial, Helvetica, sans-serif;\\n background: #000;\\n}\\n\\n.preview {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.shrink-button {\\n display: inline-flex;\\n align-items: center;\\n gap: 15px;\\n\\n height: 53px;\\n padding: 0 9px 0 23px;\\n border: 0;\\n border-radius: 999px;\\n\\n background: #ffffff;\\n color: #171717;\\n cursor: pointer;\\n\\n font-size: 20px;\\n font-weight: 600;\\n line-height: 1;\\n\\n transform: scale(1);\\n transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);\\n will-change: transform;\\n}\\n\\n.shrink-button:hover {\\n transform: scale(1.06);\\n}\\n\\n.shrink-button:active {\\n transform: scale(0.98);\\n}\\n\\n.button-text {\\n position: relative;\\n z-index: 2;\\n}\\n\\n.button-orb {\\n position: relative;\\n width: 36px;\\n height: 36px;\\n display: grid;\\n place-items: center;\\n border-radius: 999px;\\n flex-shrink: 0;\\n\\n overflow: hidden;\\n isolation: isolate;\\n transform: translateZ(0);\\n}\\n\\n.orb {\\n position: absolute;\\n inset: 0;\\n\\n display: grid;\\n place-items: center;\\n\\n border-radius: 999px;\\n\\n transform-origin: center;\\n will-change: transform;\\n backface-visibility: hidden;\\n\\n transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.orb-black {\\n background: #101010;\\n z-index: 2;\\n transform: translateZ(0) scale(1);\\n}\\n\\n.orb-purple {\\n background: #7c3aed;\\n z-index: 1;\\n transform: translateZ(0) scale(0.001);\\n}\\n\\n.arrow-icon {\\n width: 20px;\\n height: 20px;\\n transform: translateX(1px);\\n}\\n\\n.arrow-icon path {\\n fill: none;\\n stroke: #ffffff;\\n stroke-width: 3.2;\\n stroke-linecap: round;\\n stroke-linejoin: round;\\n}\\n\\n.shrink-button:hover .orb-black {\\n transform: translateZ(0) scale(0.001);\\n}\\n\\n.shrink-button:hover .orb-purple {\\n transform: translateZ(0) scale(1);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .shrink-button,\\n .orb {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb9990e2-d3c5-4222-8c7d-400272e8b72f","type":"divider","props":{},"children":[]},{"id":"6fc56d6c-61a8-49db-99b5-4804cc7f4ddf","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"a79892be-4adc-4f95-a807-42443135de03","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 white pill shape, black text, and a circular arrow orb on the right. The default orb is black, while the hover reveal orb is purple.","styles":{}}],"children":[]},{"id":"aa2c0afa-7cbc-4065-bbb5-f03f98458887","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The component is centered using ","styles":{}},{"type":"text","text":".preview","styles":{"code":true}},{"type":"text","text":" with CSS Grid:","styles":{}}],"children":[]},{"id":"8013509b-b68f-411c-95e5-7bfefb7cefcb","type":"procode","props":{"code":".preview {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"yous4mt2x\",\"name\":\"code\",\"code\":\".preview {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fac7c897-c9d6-4ecb-9819-faa92866310a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover\n","styles":{"bold":true}},{"type":"text","text":"On hover, the whole button slightly scales up. The black circle shrinks down, and the purple circle grows to full size.","styles":{}}],"children":[]},{"id":"a1fe21e2-904d-4c4b-be18-2e50fbd05cca","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active\n","styles":{"bold":true}},{"type":"text","text":"When clicked, the button scales down slightly:","styles":{}}],"children":[]},{"id":"c75035b4-5ede-4b45-b572-086856fccb8c","type":"procode","props":{"code":".shrink-button:active {\n transform: scale(0.98);\n}","language":"javascript","filename":"","files":"[{\"id\":\"of2tyx4iw\",\"name\":\"code\",\"code\":\".shrink-button:active {\\n transform: scale(0.98);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bc207325-e022-4b94-ac5c-7dd45d024f8d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The animation uses CSS ","styles":{}},{"type":"text","text":"transform: scale()","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"transition","styles":{"code":true}},{"type":"text","text":".\nThe black orb scales from ","styles":{}},{"type":"text","text":"1","styles":{"code":true}},{"type":"text","text":" to ","styles":{}},{"type":"text","text":"0.001","styles":{"code":true}},{"type":"text","text":", while the purple orb scales from ","styles":{}},{"type":"text","text":"0.001","styles":{"code":true}},{"type":"text","text":" to ","styles":{}},{"type":"text","text":"1","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a95b5e90-5a8e-4419-8734-6add5f037636","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code","styles":{"bold":true}}],"children":[]},{"id":"931bb394-b98d-4414-8dbf-ec36198a251d","type":"procode","props":{"code":".shrink-button:hover .orb-black {\n transform: translateZ(0) scale(0.001);\n}\n\n.shrink-button:hover .orb-purple {\n transform: translateZ(0) scale(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"mf4vdrs9x\",\"name\":\"code\",\"code\":\".shrink-button:hover .orb-black {\\n transform: translateZ(0) scale(0.001);\\n}\\n\\n.shrink-button:hover .orb-purple {\\n transform: translateZ(0) scale(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cb8e8a04-27b9-4214-ae04-7b74b0b0db49","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Glitch Fix\n","styles":{"bold":true}},{"type":"text","text":"The orb uses ","styles":{}},{"type":"text","text":"translateZ(0)","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"backface-visibility: hidden","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"will-change: transform","styles":{"code":true}},{"type":"text","text":" to make the scale animation smoother and reduce flickering during fast hover changes.","styles":{}}],"children":[]},{"id":"de780680-5a14-4526-b27a-c98bc6904316","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the button scale speed here:","styles":{}}],"children":[]},{"id":"8e260629-be15-45ef-a129-8462e875f3f1","type":"procode","props":{"code":"transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);","language":"javascript","filename":"","files":"[{\"id\":\"nukblxleb\",\"name\":\"code\",\"code\":\"transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0fad5d4-4850-4ff5-b75e-775a5fd5315d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the circle reveal speed here:","styles":{}}],"children":[]},{"id":"ef5aee52-7f51-4af6-ae06-fe77266fc3fd","type":"procode","props":{"code":"transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);","language":"javascript","filename":"","files":"[{\"id\":\"mb20fm63l\",\"name\":\"code\",\"code\":\"transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6c1e7c46-2b70-45f9-9ff5-cc2aaf2ae2ff","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Easing\n","styles":{"bold":true}},{"type":"text","text":"Change the smooth motion feel by editing this easing:","styles":{}}],"children":[]},{"id":"b8caa050-3d23-4c3f-8949-019791472f2a","type":"procode","props":{"code":"cubic-bezier(0.22, 1, 0.36, 1)","language":"javascript","filename":"","files":"[{\"id\":\"qecsdaxta\",\"name\":\"code\",\"code\":\"cubic-bezier(0.22, 1, 0.36, 1)\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0221f03e-0a33-4801-9342-a50f5c9bd8a2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the button and orb colors here:","styles":{}}],"children":[]},{"id":"1da3a5e1-7090-43f4-9ed2-e679c95931fc","type":"procode","props":{"code":".shrink-button {\n background: #ffffff;\n color: #171717;\n}\n\n.orb-black {\n background: #101010;\n}\n\n.orb-purple {\n background: #7c3aed;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4n91lxmnv\",\"name\":\"code\",\"code\":\".shrink-button {\\n background: #ffffff;\\n color: #171717;\\n}\\n\\n.orb-black {\\n background: #101010;\\n}\\n\\n.orb-purple {\\n background: #7c3aed;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fafb1f52-1d80-4ea6-8cac-cd9241d69b1d","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 height, padding, and radius here:","styles":{}}],"children":[]},{"id":"21c72888-55b1-40d3-9e7a-79acdabd509d","type":"procode","props":{"code":".shrink-button {\n height: 53px;\n padding: 0 9px 0 23px;\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"e6g95xmmc\",\"name\":\"code\",\"code\":\".shrink-button {\\n height: 53px;\\n padding: 0 9px 0 23px;\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db00127c-8ea3-4843-8166-0269a95d5274","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the circle size here:","styles":{}}],"children":[]},{"id":"793db7f1-8bd7-4762-b6fc-2b5dd37888ec","type":"procode","props":{"code":".button-orb {\n width: 36px;\n height: 36px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7zgsfxz06\",\"name\":\"code\",\"code\":\".button-orb {\\n width: 36px;\\n height: 36px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6da5450f-b8c1-4776-947f-c5af9bedd481","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the visible button text here:","styles":{}}],"children":[]},{"id":"0f323a8f-922d-4a9b-8a50-bc4a117894c7","type":"procode","props":{"code":"Button","language":"javascript","filename":"","files":"[{\"id\":\"wco2u1i65\",\"name\":\"code\",\"code\":\"Button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f35a95c-f64f-434a-add2-57720e577839","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"No JavaScript is needed. The effect is handled with HTML + CSS.","styles":{}}],"children":[]},{"id":"6c22b137-5811-479a-b815-03d3364174d5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]