3D Flip text Button

[{"id":"cc74d663-e0cd-4a12-8db9-8103457dc304","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"27a11e31-7cd2-4ef9-a770-510a05e8b10e","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --flip-btn-bg-primary: #9806e1;\\n --flip-btn-text-primary: #ffffff;\\n --flip-btn-bg-secondary: #151515;\\n --flip-btn-text-secondary: #9806e1;\\n --flip-btn-duration: 0.5s;\\n --flip-btn-ease: cubic-bezier(0.76, 0, 0.24, 1);\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background-color: #e4e4e4;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.preview-container {\\n display: grid;\\n place-items: center;\\n min-height: 100vh;\\n}\\n\\n.flip-btn {\\n position: relative;\\n z-index: 2;\\n width: 100px;\\n height: 40px;\\n padding: 0;\\n border: 0;\\n border-radius: 25px;\\n overflow: hidden;\\n background: transparent;\\n cursor: pointer;\\n}\\n\\n.flip-btn__track {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n top: 0;\\n display: block;\\n transition: top var(--flip-btn-duration) var(--flip-btn-ease);\\n}\\n\\n.flip-btn.is-active .flip-btn__track {\\n top: -100%;\\n}\\n\\n.flip-btn__face {\\n width: 100%;\\n height: 100%;\\n display: block;\\n background-color: var(--flip-btn-bg-primary);\\n color: var(--flip-btn-text-primary);\\n}\\n\\n.flip-btn__face:nth-child(2) {\\n background-color: var(--flip-btn-bg-secondary);\\n color: var(--flip-btn-text-primary);\\n}\\n\\n.flip-btn__text {\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n height: 100%;\\n width: 100%;\\n transform-style: preserve-3d;\\n transition: transform 0.75s var(--flip-btn-ease);\\n}\\n\\n.flip-btn__text span {\\n margin: 0;\\n font-size: 0.95rem;\\n transition: all 0.75s var(--flip-btn-ease);\\n pointer-events: none;\\n text-transform: uppercase;\\n}\\n\\n.flip-btn__text span:nth-child(2) {\\n position: absolute;\\n transform-origin: bottom center;\\n transform: rotateX(-90deg) translateY(9px);\\n opacity: 0;\\n}\\n\\n.flip-btn__face:hover .flip-btn__text {\\n transform: rotateX(90deg);\\n}\\n\\n.flip-btn__face:hover .flip-btn__text span:nth-child(1) {\\n transform: translateY(-100%);\\n opacity: 0;\\n}\\n\\n.flip-btn__face:hover .flip-btn__text span:nth-child(2) {\\n opacity: 1;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n 3D Flip text Button\\n \\n \\n \\n

\\n \\n \\n \\n \\n Open\\n Open\\n \\n \\n \\n \\n Close\\n Close\\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\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const flipBtn = document.querySelector(\\\".flip-btn\\\");\\n\\nif (flipBtn) {\\n flipBtn.addEventListener(\\\"click\\\", () => {\\n const isActive = flipBtn.classList.contains(\\\"is-active\\\");\\n flipBtn.classList.toggle(\\\"is-active\\\", !isActive);\\n flipBtn.setAttribute(\\\"aria-expanded\\\", String(!isActive));\\n flipBtn.setAttribute(\\n \\\"aria-label\\\",\\n !isActive ? \\\"Close menu\\\" : \\\"Toggle menu\\\",\\n );\\n });\\n}\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"85a4ecd2-b4ad-4652-a7ee-7f74177b4863","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c3636fc9-eb8a-4b50-97e5-a92edc3a84de","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"cff86a51-d7c9-4360-b6a8-166ed1b91a22","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n \\n \\n \\n Open\\n Open\\n \\n \\n \\n \\n Close\\n Close\\n \\n \\n \\n \\n

\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f67bea61-553e-4735-9536-dffa2a8d04bc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"16cb1402-2a3f-463a-96c5-7e13b3b49e5a","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --flip-btn-bg-primary: #9806e1;\\n --flip-btn-text-primary: #ffffff;\\n --flip-btn-bg-secondary: #151515;\\n --flip-btn-text-secondary: #9806e1;\\n --flip-btn-duration: 0.5s;\\n --flip-btn-ease: cubic-bezier(0.76, 0, 0.24, 1);\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n background-color: #e4e4e4;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.preview-container {\\n display: grid;\\n place-items: center;\\n min-height: 100vh;\\n}\\n\\n.flip-btn {\\n position: relative;\\n z-index: 2;\\n width: 100px;\\n height: 40px;\\n padding: 0;\\n border: 0;\\n border-radius: 25px;\\n overflow: hidden;\\n background: transparent;\\n cursor: pointer;\\n}\\n\\n.flip-btn__track {\\n position: relative;\\n width: 100%;\\n height: 100%;\\n top: 0;\\n display: block;\\n transition: top var(--flip-btn-duration) var(--flip-btn-ease);\\n}\\n\\n.flip-btn.is-active .flip-btn__track {\\n top: -100%;\\n}\\n\\n.flip-btn__face {\\n width: 100%;\\n height: 100%;\\n display: block;\\n background-color: var(--flip-btn-bg-primary);\\n color: var(--flip-btn-text-primary);\\n}\\n\\n.flip-btn__face:nth-child(2) {\\n background-color: var(--flip-btn-bg-secondary);\\n color: var(--flip-btn-text-primary);\\n}\\n\\n.flip-btn__text {\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n height: 100%;\\n width: 100%;\\n transform-style: preserve-3d;\\n transition: transform 0.75s var(--flip-btn-ease);\\n}\\n\\n.flip-btn__text span {\\n margin: 0;\\n font-size: 0.95rem;\\n transition: all 0.75s var(--flip-btn-ease);\\n pointer-events: none;\\n text-transform: uppercase;\\n}\\n\\n.flip-btn__text span:nth-child(2) {\\n position: absolute;\\n transform-origin: bottom center;\\n transform: rotateX(-90deg) translateY(9px);\\n opacity: 0;\\n}\\n\\n.flip-btn__face:hover .flip-btn__text {\\n transform: rotateX(90deg);\\n}\\n\\n.flip-btn__face:hover .flip-btn__text span:nth-child(1) {\\n transform: translateY(-100%);\\n opacity: 0;\\n}\\n\\n.flip-btn__face:hover .flip-btn__text span:nth-child(2) {\\n opacity: 1;\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"74cde5e7-062e-4083-bf4d-b323b881b07c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"f0c1f9a0-a43a-45df-987c-f25274f92127","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const flipBtn = document.querySelector(\\\".flip-btn\\\");\\n\\nif (flipBtn) {\\n flipBtn.addEventListener(\\\"click\\\", () => {\\n const isActive = flipBtn.classList.contains(\\\"is-active\\\");\\n flipBtn.classList.toggle(\\\"is-active\\\", !isActive);\\n flipBtn.setAttribute(\\\"aria-expanded\\\", String(!isActive));\\n flipBtn.setAttribute(\\n \\\"aria-label\\\",\\n !isActive ? \\\"Close menu\\\" : \\\"Toggle menu\\\",\\n );\\n });\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5249d463-f8c7-449a-8bf7-a7a5ccc98d63","type":"divider","props":{},"children":[]},{"id":"0fb01254-49c0-454a-b8d7-0393239e36ed","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"79efdb54-8ab4-4f63-b862-d169bf591f15","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2d0ed087-146f-4cd5-9fac-3b479cfb5e15","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\nCentered pill button with purple ","styles":{}},{"type":"text","text":"Open","styles":{"code":true}},{"type":"text","text":" state and black ","styles":{}},{"type":"text","text":"Close","styles":{"code":true}},{"type":"text","text":" state.","styles":{}}],"children":[]},{"id":"100592a2-718b-4513-9077-9bfa3208bc47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout","styles":{}}],"children":[]},{"id":"ff09b2ff-b38a-4506-a0a0-877bed4fb2a5","type":"procode","props":{"code":".preview-container {\n display: grid;\n place-items: center;\n min-height: 100vh;\n}","language":"javascript","filename":"","files":"[{\"id\":\"5rga1s5ww\",\"name\":\"code\",\"code\":\".preview-container {\\n display: grid;\\n place-items: center;\\n min-height: 100vh;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4d80f749-c432-45d2-8a3d-8515b2f38622","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button","styles":{}}],"children":[]},{"id":"48faba67-c1ff-457a-b8ce-1d78be8cf61e","type":"procode","props":{"code":".flip-btn {\n width: 100px;\n height: 40px;\n border-radius: 25px;\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"r612bpj6p\",\"name\":\"code\",\"code\":\".flip-btn {\\n width: 100px;\\n height: 40px;\\n border-radius: 25px;\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fd96347a-72fa-49bb-ad68-d23bebb962ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Track Slide","styles":{}}],"children":[]},{"id":"7c05e08c-4be6-4ff5-b081-eb23562f6785","type":"procode","props":{"code":".flip-btn.is-active .flip-btn__track {\n top: -100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9tno92tkw\",\"name\":\"code\",\"code\":\".flip-btn.is-active .flip-btn__track {\\n top: -100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"63fa5011-a167-4044-a2f3-c840e853a330","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"3D Text","styles":{}}],"children":[]},{"id":"50d28184-0ecd-4f59-a1e2-38a6ee97d05d","type":"procode","props":{"code":".flip-btn__text {\n transform-style: preserve-3d;\n transition: transform 0.75s var(--flip-btn-ease);\n}","language":"javascript","filename":"","files":"[{\"id\":\"jnlnxazir\",\"name\":\"code\",\"code\":\".flip-btn__text {\\n transform-style: preserve-3d;\\n transition: transform 0.75s var(--flip-btn-ease);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"53707248-ace0-4c06-b2e8-cbc3c22101f7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flip","styles":{}}],"children":[]},{"id":"af640ff6-9c91-4476-8973-3b34e20e5349","type":"procode","props":{"code":".flip-btn__face:hover .flip-btn__text {\n transform: rotateX(90deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"0nazca62i\",\"name\":\"code\",\"code\":\".flip-btn__face:hover .flip-btn__text {\\n transform: rotateX(90deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"42d24d85-46db-42b9-87f8-55659f2a688e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Click Toggle","styles":{}}],"children":[]},{"id":"b404f0d2-1628-4a0e-ad61-dddc415eadd2","type":"procode","props":{"code":"flipBtn.classList.toggle(\"is-active\", !isActive);","language":"javascript","filename":"","files":"[{\"id\":\"9qq5s88kf\",\"name\":\"code\",\"code\":\"flipBtn.classList.toggle(\\\"is-active\\\", !isActive);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93837bc9-3c5f-48ac-8718-ab9f4c159293","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration","styles":{}}],"children":[]},{"id":"a9c617c4-b864-41fb-b550-d845b480c000","type":"procode","props":{"code":"--flip-btn-duration: 0.5s;","language":"javascript","filename":"","files":"[{\"id\":\"kecm0tc9f\",\"name\":\"code\",\"code\":\"--flip-btn-duration: 0.5s;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce446c1e-f90b-4ffc-884c-57252fa61f89","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color","styles":{}}],"children":[]},{"id":"54d97b30-f7b1-414e-875b-524e77d69fe2","type":"procode","props":{"code":"--flip-btn-bg-primary: #9806e1;\n--flip-btn-text-primary: #ffffff;\n--flip-btn-bg-secondary: #151515;","language":"javascript","filename":"","files":"[{\"id\":\"thz8sx8lv\",\"name\":\"code\",\"code\":\"--flip-btn-bg-primary: #9806e1;\\n--flip-btn-text-primary: #ffffff;\\n--flip-btn-bg-secondary: #151515;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"347f488c-f4bf-4534-9cf0-e76466e0122e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n\nJavaScript toggles ","styles":{}},{"type":"text","text":".is-active","styles":{"code":true}},{"type":"text","text":", updates ","styles":{}},{"type":"text","text":"aria-expanded","styles":{"code":true}},{"type":"text","text":", changes the aria label, and lets CSS slide the button track from ","styles":{}},{"type":"text","text":"Open","styles":{"code":true}},{"type":"text","text":" to ","styles":{}},{"type":"text","text":"Close","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"3005aae6-57d2-4f2b-b82f-d669b4666cc2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]