Cube Pill Button

[{"id":"0d40829d-f1c3-4569-86c2-6c1137cbfcde","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"26174744-a8f6-4b2b-93bd-7ac165035ed4","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: #111;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.mindory-pill-button {\\n width: fit-content;\\n height: 54px;\\n padding: 0;\\n display: flex;\\n align-items: stretch;\\n\\n border: 3px solid #fff;\\n border-radius: 999px;\\n background: #fff;\\n\\n cursor: pointer;\\n overflow: hidden;\\n perspective: 800px;\\n\\n transition: border-color 0.4s ease;\\n}\\n\\n.mindory-pill-icon {\\n width: 58px;\\n height: 100%;\\n flex: 0 0 58px;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n background: #fff;\\n color: #111;\\n border-radius: 999px 0 0 999px;\\n}\\n\\n.mindory-pill-icon svg {\\n width: 32px;\\n height: 20px;\\n display: block;\\n fill: currentColor;\\n}\\n\\n.mindory-pill-cube {\\n width: 200px;\\n height: 48px;\\n position: relative;\\n\\n transform-style: preserve-3d;\\n transform-origin: center center;\\n transform: translateZ(0) rotateX(0deg);\\n\\n transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);\\n will-change: transform;\\n}\\n\\n.mindory-pill-button:hover {\\n border-color: #5d3fd3;\\n}\\n\\n.mindory-pill-button:hover .mindory-pill-cube {\\n transform: translateZ(0) rotateX(90deg);\\n}\\n\\n.mindory-pill-side {\\n position: absolute;\\n inset: 0;\\n\\n width: 200px;\\n height: 48px;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n font-size: 0.76em;\\n font-weight: 800;\\n letter-spacing: 1px;\\n text-transform: uppercase;\\n white-space: nowrap;\\n\\n backface-visibility: hidden;\\n transform-style: preserve-3d;\\n}\\n\\n.mindory-pill-front {\\n background: #222229;\\n color: #fff;\\n transform: translateZ(24px);\\n}\\n\\n.mindory-pill-top {\\n background: #5d3fd3;\\n color: #fff;\\n transform: rotateX(-90deg) translateZ(24px);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .mindory-pill-button,\\n .mindory-pill-cube {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Cube Pill 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":"e359a805-464f-4545-a0f6-c5f1c2030783","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3eda73ee-36a6-43a9-b983-d2f316016ac1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"b3bed1d5-bfe9-4d79-9927-2778ba035574","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f58a0da7-32d7-4421-9f4b-53ac1dbee819","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"65ab77c7-7d55-43e4-8d6b-6f48fd889e15","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: #111;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.mindory-pill-button {\\n width: fit-content;\\n height: 54px;\\n padding: 0;\\n display: flex;\\n align-items: stretch;\\n\\n border: 3px solid #fff;\\n border-radius: 999px;\\n background: #fff;\\n\\n cursor: pointer;\\n overflow: hidden;\\n perspective: 800px;\\n\\n transition: border-color 0.4s ease;\\n}\\n\\n.mindory-pill-icon {\\n width: 58px;\\n height: 100%;\\n flex: 0 0 58px;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n background: #fff;\\n color: #111;\\n border-radius: 999px 0 0 999px;\\n}\\n\\n.mindory-pill-icon svg {\\n width: 32px;\\n height: 20px;\\n display: block;\\n fill: currentColor;\\n}\\n\\n.mindory-pill-cube {\\n width: 200px;\\n height: 48px;\\n position: relative;\\n\\n transform-style: preserve-3d;\\n transform-origin: center center;\\n transform: translateZ(0) rotateX(0deg);\\n\\n transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);\\n will-change: transform;\\n}\\n\\n.mindory-pill-button:hover {\\n border-color: #5d3fd3;\\n}\\n\\n.mindory-pill-button:hover .mindory-pill-cube {\\n transform: translateZ(0) rotateX(90deg);\\n}\\n\\n.mindory-pill-side {\\n position: absolute;\\n inset: 0;\\n\\n width: 200px;\\n height: 48px;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n font-size: 0.76em;\\n font-weight: 800;\\n letter-spacing: 1px;\\n text-transform: uppercase;\\n white-space: nowrap;\\n\\n backface-visibility: hidden;\\n transform-style: preserve-3d;\\n}\\n\\n.mindory-pill-front {\\n background: #222229;\\n color: #fff;\\n transform: translateZ(24px);\\n}\\n\\n.mindory-pill-top {\\n background: #5d3fd3;\\n color: #fff;\\n transform: rotateX(-90deg) translateZ(24px);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .mindory-pill-button,\\n .mindory-pill-cube {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a401eeb-5e68-45b6-8fdc-26a6f6328a58","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"f08033f4-d47e-4e9c-9e7a-a66002cd1d6a","type":"divider","props":{},"children":[]},{"id":"6dc974de-8f04-4da0-8594-afe5cd9c4161","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"4f7fe2be-3cf3-40ca-a0bd-656984a1d096","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button has two main parts: ","styles":{}},{"type":"text","text":".mindory-pill-icon","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":".mindory-pill-cube","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"e022b3dd-419d-47f4-840a-89a81b06238b","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"xybxgw2xd\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1fe1bc90-ea4c-466b-9ec4-8f2690139224","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The icon area contains the SVG logo. The cube area contains two text faces: the front text and the top text.","styles":{}}],"children":[]},{"id":"c7f76b01-7422-44d5-b6c0-9da1885448ee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe page centers the component with flexbox.","styles":{}}],"children":[]},{"id":"a7000dd8-3018-4c28-a294-f9426c20d86b","type":"procode","props":{"code":"body {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kuz718z8s\",\"name\":\"code\",\"code\":\"body {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"51d4e99f-7d54-4780-8caa-713117108c45","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Shell\n\nThe main button uses ","styles":{}},{"type":"text","text":"width: fit-content","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"height: 54px","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"border-radius: 999px","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"16d601c8-c2c3-49d3-b3ab-0ed6f903d375","type":"procode","props":{"code":".mindory-pill-button {\n height: 54px;\n display: flex;\n align-items: stretch;\n border-radius: 999px;\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"horoeq3p9\",\"name\":\"code\",\"code\":\".mindory-pill-button {\\n height: 54px;\\n display: flex;\\n align-items: stretch;\\n border-radius: 999px;\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"033eb882-ab8c-4ec2-a6e5-87d752369258","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" keeps the icon and cube faces clipped inside the pill shape.","styles":{}}],"children":[]},{"id":"ac9bdb83-6f20-4af1-b622-c866d814c81b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Area\n\nThe icon side is fixed at ","styles":{}},{"type":"text","text":"58px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"dd2a0fa9-cb05-4497-81da-20c1d4c17eb6","type":"procode","props":{"code":".mindory-pill-icon {\n width: 58px;\n flex: 0 0 58px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"uuz4xq364\",\"name\":\"code\",\"code\":\".mindory-pill-icon {\\n width: 58px;\\n flex: 0 0 58px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"39c62e3b-9b80-46b1-9d1b-c6a2409c50fc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It uses a white background and black icon color, so it stays separate from the animated text area.","styles":{}}],"children":[]},{"id":"46fee096-42a5-4e58-97e0-dfe8a832dcce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Cube Text Area\n\nThe cube has a fixed size of ","styles":{}},{"type":"text","text":"200px × 48px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8ebd3247-42ec-4163-b268-1169b9effb41","type":"procode","props":{"code":".mindory-pill-cube {\n width: 200px;\n height: 48px;\n transform-style: preserve-3d;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lcztkuh2x\",\"name\":\"code\",\"code\":\".mindory-pill-cube {\\n width: 200px;\\n height: 48px;\\n transform-style: preserve-3d;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7ec0f25e-6785-4c0a-82db-86a5611290b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This element is the part that rotates on hover.","styles":{}}],"children":[]},{"id":"adfd1f9b-27f1-4709-b837-c6e213102e3d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"3D Faces\n\nBoth text faces are positioned absolutely inside the cube.","styles":{}}],"children":[]},{"id":"f21419d4-2fe3-43e9-8783-9cf5ef49aff8","type":"procode","props":{"code":".mindory-pill-side {\n position: absolute;\n inset: 0;\n backface-visibility: hidden;\n transform-style: preserve-3d;\n}","language":"javascript","filename":"","files":"[{\"id\":\"iuh3p6g0e\",\"name\":\"code\",\"code\":\".mindory-pill-side {\\n position: absolute;\\n inset: 0;\\n backface-visibility: hidden;\\n transform-style: preserve-3d;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2e858db8-f471-4ee6-9471-9eca16693669","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The front face sits forward using ","styles":{}},{"type":"text","text":"translateZ(24px)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"fea3f468-3304-409a-9658-5be2ee050351","type":"procode","props":{"code":".mindory-pill-front {\n transform: translateZ(24px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"6jobnfytf\",\"name\":\"code\",\"code\":\".mindory-pill-front {\\n transform: translateZ(24px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ef73b49b-07de-46e3-b201-702522b31b03","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The top face is rotated upward and also moved forward.","styles":{}}],"children":[]},{"id":"832ce467-fcfb-4d3f-ab48-a67a57e46ab0","type":"procode","props":{"code":".mindory-pill-top {\n transform: rotateX(-90deg) translateZ(24px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"5a0wbpynr\",\"name\":\"code\",\"code\":\".mindory-pill-top {\\n transform: rotateX(-90deg) translateZ(24px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d100d7bc-ad13-42de-a17f-639036ef953c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Animation\n\nWhen hovering the button, the cube rotates on the X axis.","styles":{}}],"children":[]},{"id":"7caf1494-3399-4686-b251-527274d8ea36","type":"procode","props":{"code":".mindory-pill-button:hover .mindory-pill-cube {\n transform: translateZ(0) rotateX(90deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"2bvtfhn2p\",\"name\":\"code\",\"code\":\".mindory-pill-button:hover .mindory-pill-cube {\\n transform: translateZ(0) rotateX(90deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"242dbcea-2044-4580-9e35-949420116473","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the front text roll away and reveals the top text.","styles":{}}],"children":[]},{"id":"9a77e1d2-4939-48a3-aace-895c4cfaaeaa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Border Hover\n\nThe border changes from white to purple on hover.","styles":{}}],"children":[]},{"id":"3aa655f3-8b82-4569-b84b-12ba93663734","type":"procode","props":{"code":".mindory-pill-button:hover {\n border-color: #5d3fd3;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jgxcv4lay\",\"name\":\"code\",\"code\":\".mindory-pill-button:hover {\\n border-color: #5d3fd3;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a7c58e7c-c215-4a47-a7de-3c4e89d9a016","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]