Flip cube Pill Button

[{"id":"619315fb-9261-416a-bd36-f2110778d309","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5557b57d-cae7-4253-873d-819e9263633e","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.easter-flip-scene {\\n width: 12em;\\n height: 4em;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n perspective: 600px;\\n}\\n\\n.easter-flip-pill {\\n width: 12em;\\n height: 4em;\\n padding: 0;\\n border: none;\\n background: transparent;\\n position: relative;\\n cursor: pointer;\\n transform-style: preserve-3d;\\n transform-origin: 50% 50%;\\n transition: transform 0.85s cubic-bezier(0.17, 0.67, 0.14, 0.93);\\n}\\n\\n.easter-flip-pill:hover {\\n transform: rotateX(-90deg);\\n}\\n\\n.easter-flip-pill__side {\\n position: absolute;\\n inset: 0;\\n width: 12em;\\n height: 4em;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: 999px;\\n text-transform: uppercase;\\n font-weight: 800;\\n letter-spacing: 1px;\\n backface-visibility: hidden;\\n}\\n\\n.easter-flip-pill__side--front {\\n background: #b8f2d0;\\n color: #222229;\\n box-shadow: inset 0 0 0 5px #ffffff;\\n transform: translate3d(0, 0, 2em);\\n}\\n\\n.easter-flip-pill__side--top {\\n background: #f9d5e5;\\n color: #222229;\\n box-shadow: inset 0 0 0 5px #ffffff;\\n transform: rotateX(90deg) translate3d(0, 0, 2em);\\n}\\n\\n.easter-flip-pill:active {\\n transform: rotateX(-90deg) scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .easter-flip-pill {\\n transition: none;\\n }\\n\\n .easter-flip-pill:hover,\\n .easter-flip-pill:active {\\n transform: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Flip 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":"c21330f5-4f82-40ae-85fa-bbaada605a6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"49328737-7cb0-40bb-be06-8d7f4a6b9586","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"e0c6f1e2-3fc2-43ba-b72f-c6109ba21237","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c32cba37-87ad-47c6-9d4e-070532bd06e2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"3a3a2e61-376b-4e8a-a4cc-60c4f691ae48","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.easter-flip-scene {\\n width: 12em;\\n height: 4em;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n perspective: 600px;\\n}\\n\\n.easter-flip-pill {\\n width: 12em;\\n height: 4em;\\n padding: 0;\\n border: none;\\n background: transparent;\\n position: relative;\\n cursor: pointer;\\n transform-style: preserve-3d;\\n transform-origin: 50% 50%;\\n transition: transform 0.85s cubic-bezier(0.17, 0.67, 0.14, 0.93);\\n}\\n\\n.easter-flip-pill:hover {\\n transform: rotateX(-90deg);\\n}\\n\\n.easter-flip-pill__side {\\n position: absolute;\\n inset: 0;\\n width: 12em;\\n height: 4em;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: 999px;\\n text-transform: uppercase;\\n font-weight: 800;\\n letter-spacing: 1px;\\n backface-visibility: hidden;\\n}\\n\\n.easter-flip-pill__side--front {\\n background: #b8f2d0;\\n color: #222229;\\n box-shadow: inset 0 0 0 5px #ffffff;\\n transform: translate3d(0, 0, 2em);\\n}\\n\\n.easter-flip-pill__side--top {\\n background: #f9d5e5;\\n color: #222229;\\n box-shadow: inset 0 0 0 5px #ffffff;\\n transform: rotateX(90deg) translate3d(0, 0, 2em);\\n}\\n\\n.easter-flip-pill:active {\\n transform: rotateX(-90deg) scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .easter-flip-pill {\\n transition: none;\\n }\\n\\n .easter-flip-pill:hover,\\n .easter-flip-pill:active {\\n transform: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0b8245bc-e473-43d8-9cf3-31611c7bd35f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"dec8d271-d568-4dbf-8ca2-a34bff17a022","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6d53ee47-8e38-4d35-9b84-89fff2599cc8","type":"divider","props":{},"children":[]},{"id":"e97e631f-439f-45fa-b204-aeaa2e1dbc39","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"5b70f497-762e-424e-9ecf-b0433948d9c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original class names are changed.","styles":{}}],"children":[]},{"id":"50b9d009-893b-46b6-a3a6-454e772e0f22","type":"procode","props":{"code":"scene -> easter-flip-scene\ncube -> easter-flip-pill\nside -> easter-flip-pill__side\ntop -> easter-flip-pill__side--top\nfront -> easter-flip-pill__side--front","language":"javascript","filename":"","files":"[{\"id\":\"g1hweatpu\",\"name\":\"code\",\"code\":\"scene -> easter-flip-scene\\ncube -> easter-flip-pill\\nside -> easter-flip-pill__side\\ntop -> easter-flip-pill__side--top\\nfront -> easter-flip-pill__side--front\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"087de4a5-1c4c-4753-a267-40a0d79de27a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Flow\n\nThe button has two text sides.","styles":{}}],"children":[]},{"id":"cf442695-6a82-4b0b-affc-a662883d312c","type":"procode","props":{"code":"\n Easter\n\n\n\n Happy\n","language":"javascript","filename":"","files":"[{\"id\":\"197xsr106\",\"name\":\"code\",\"code\":\"\\n Easter\\n\\n\\n\\n Happy\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"267a8c84-0876-404c-922c-c6f129bc7c84","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default view shows:","styles":{}}],"children":[]},{"id":"340272d8-534e-4e58-aa3c-88e34d591acb","type":"procode","props":{"code":"Happy","language":"javascript","filename":"","files":"[{\"id\":\"etdb89ea0\",\"name\":\"code\",\"code\":\"Happy\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c2848141-8ba8-4f34-9ace-e63b336bc7f0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover view flips to:","styles":{}}],"children":[]},{"id":"cb117ddc-edd4-443c-8562-129f181e3aaa","type":"procode","props":{"code":"Easter","language":"javascript","filename":"","files":"[{\"id\":\"wuf1vz97k\",\"name\":\"code\",\"code\":\"Easter\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"773983c5-507c-4155-befc-c3425f96f3dd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Pill Shape Flow\n\nThe button becomes pill-shaped by using a large border radius.","styles":{}}],"children":[]},{"id":"b55514c6-2ad9-4df4-b46d-93046afa1544","type":"procode","props":{"code":"border-radius: 999px;","language":"javascript","filename":"","files":"[{\"id\":\"r90c40kw6\",\"name\":\"code\",\"code\":\"border-radius: 999px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e6f5c1d7-23ab-4700-be68-b5a3351d87b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"3D Flip Flow\n\nThe main button keeps the 3D transform.","styles":{}}],"children":[]},{"id":"9de2c2c5-1009-4323-b8ae-07163459c4d2","type":"procode","props":{"code":"transform-style: preserve-3d;","language":"javascript","filename":"","files":"[{\"id\":\"nsu2a00h7\",\"name\":\"code\",\"code\":\"transform-style: preserve-3d;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86b7b53d-ea10-4e6c-8755-311489ace801","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, it rotates upward.","styles":{}}],"children":[]},{"id":"5d7cf705-ad22-4eed-a2bd-4127bbc4450f","type":"procode","props":{"code":".easter-flip-pill:hover {\n transform: rotateX(-90deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ul3jiwyhy\",\"name\":\"code\",\"code\":\".easter-flip-pill:hover {\\n transform: rotateX(-90deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ec12647c-baf5-48f6-b9a0-7eb5970a8ba0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Front Side Flow\n\nThe front side uses a pastel Easter green background.","styles":{}}],"children":[]},{"id":"7b4698a6-6555-4f08-8040-4d92cadc3a39","type":"procode","props":{"code":"background: #b8f2d0;","language":"javascript","filename":"","files":"[{\"id\":\"axkhophew\",\"name\":\"code\",\"code\":\"background: #b8f2d0;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd9eece8-f4f4-4a0c-91a9-3866bb7c7e09","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Top Side Flow\n\nThe top side uses a pastel Easter pink background.","styles":{}}],"children":[]},{"id":"4da4838b-7dab-4e38-bacd-63c5680ce1a1","type":"procode","props":{"code":"background: #f9d5e5;","language":"javascript","filename":"","files":"[{\"id\":\"y33phedsp\",\"name\":\"code\",\"code\":\"background: #f9d5e5;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4156a45a-1894-438a-9eb5-4a3a9a271bae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"3D Position Flow\n\nThe front side sits in front.","styles":{}}],"children":[]},{"id":"6dc902e2-a62d-4db6-adce-62afd313a504","type":"procode","props":{"code":"transform: translate3d(0, 0, 2em);","language":"javascript","filename":"","files":"[{\"id\":\"ptwvyarmx\",\"name\":\"code\",\"code\":\"transform: translate3d(0, 0, 2em);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74b44372-dd7b-4e43-addf-2ddb37e1091a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The top side is rotated upward and becomes visible on hover.","styles":{}}],"children":[]},{"id":"9bfb9463-94d6-4dc1-a8ad-a8f4c8897f3e","type":"procode","props":{"code":"transform: rotateX(90deg) translate3d(0, 0, 2em);","language":"javascript","filename":"","files":"[{\"id\":\"8o3pzml5s\",\"name\":\"code\",\"code\":\"transform: rotateX(90deg) translate3d(0, 0, 2em);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4b87a37a-2424-4843-b5a2-58d280430ae5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]