Basic Rounded Tooltip Button

[{"id":"2085acf1-7045-49c6-889a-62a380ed3067","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"02c66c64-9489-4214-afcb-4cf8f5a1ea3f","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.basic-button {\\n --width: 120px;\\n --height: 42px;\\n --tooltip-height: 34px;\\n --tooltip-width: 82px;\\n --tooltip-gap: 16px;\\n --button-color: #111111;\\n --tooltip-color: #333333;\\n\\n width: var(--width);\\n height: var(--height);\\n position: relative;\\n background: var(--button-color);\\n text-align: center;\\n border-radius: 999px;\\n font-family: Arial, Helvetica, sans-serif;\\n cursor: pointer;\\n transition:\\n background 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.basic-button::before {\\n position: absolute;\\n content: attr(data-tooltip);\\n width: var(--tooltip-width);\\n height: var(--tooltip-height);\\n left: calc(50% - var(--tooltip-width) / 2);\\n bottom: calc(100% + var(--tooltip-gap));\\n z-index: 3;\\n background: var(--tooltip-color);\\n color: #ffffff;\\n font-size: 0.85rem;\\n line-height: var(--tooltip-height);\\n border-radius: 999px;\\n visibility: hidden;\\n clip-path: inset(0 0 100% 0 round 999px);\\n transform: translateY(8px);\\n transition:\\n clip-path 0.35s ease,\\n transform 0.35s ease,\\n visibility 0s linear 0.35s;\\n}\\n\\n.basic-button::after {\\n position: absolute;\\n content: \\\"\\\";\\n width: 14px;\\n height: 14px;\\n left: calc(50% - 7px);\\n bottom: calc(100% + var(--tooltip-gap) - 6px);\\n z-index: 2;\\n background: var(--tooltip-color);\\n border-radius: 2px;\\n visibility: hidden;\\n transform: translateY(8px) rotate(45deg) scale(0);\\n transition:\\n transform 0.35s ease,\\n visibility 0s linear 0.35s;\\n}\\n\\n.button-wrapper,\\n.button-text,\\n.button-icon {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n left: 0;\\n overflow: hidden;\\n color: #ffffff;\\n}\\n\\n.button-wrapper {\\n top: 0;\\n border-radius: inherit;\\n}\\n\\n.button-text {\\n top: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 15px;\\n font-weight: 600;\\n transition: top 0.45s ease;\\n}\\n\\n.button-icon {\\n top: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: top 0.45s ease;\\n}\\n\\n.button-icon svg {\\n width: 23px;\\n height: 23px;\\n}\\n\\n.basic-button:hover {\\n background: #111111;\\n transform: translateY(-1px);\\n}\\n\\n.basic-button:hover .button-text {\\n top: -100%;\\n}\\n\\n.basic-button:hover .button-icon {\\n top: 0;\\n}\\n\\n.basic-button:hover::before {\\n visibility: visible;\\n clip-path: inset(0 0 0 0 round 999px);\\n transform: translateY(0);\\n transition-delay: 0s, 0s, 0s;\\n}\\n\\n.basic-button:hover::after {\\n visibility: visible;\\n transform: translateY(0) rotate(45deg) scale(1);\\n transition-delay: 0s, 0s;\\n}\\n\\n.basic-button:active {\\n transform: scale(0.97);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .basic-button,\\n .basic-button::before,\\n .basic-button::after,\\n .button-text,\\n .button-icon {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Basic Rounded Tooltip Button\\n \\n \\n \\n

\\n

Button

\\n\\n \\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":"ef0434a8-f8fb-40ed-861d-2827210cafa1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7f16eff6-43ab-4d83-b2b8-c6dc95e57b70","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5aeef099-ae66-4e6e-83f2-9339bf07be23","type":"divider","props":{},"children":[]},{"id":"f42b2f8a-0ce7-4a37-a27b-e7f3c56ca7e0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"33b4d812-0abd-479d-b0e0-5974963f9a7d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

Button

\\n\\n \\n \\n \\n \\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4a2357a-94d9-4a7c-a98e-49c6b808a91a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"e98b4848-c179-43d0-8580-9a35424e722d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.basic-button {\\n --width: 120px;\\n --height: 42px;\\n --tooltip-height: 34px;\\n --tooltip-width: 82px;\\n --tooltip-gap: 16px;\\n --button-color: #111111;\\n --tooltip-color: #333333;\\n\\n width: var(--width);\\n height: var(--height);\\n position: relative;\\n background: var(--button-color);\\n text-align: center;\\n border-radius: 999px;\\n font-family: Arial, Helvetica, sans-serif;\\n cursor: pointer;\\n transition:\\n background 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.basic-button::before {\\n position: absolute;\\n content: attr(data-tooltip);\\n width: var(--tooltip-width);\\n height: var(--tooltip-height);\\n left: calc(50% - var(--tooltip-width) / 2);\\n bottom: calc(100% + var(--tooltip-gap));\\n z-index: 3;\\n background: var(--tooltip-color);\\n color: #ffffff;\\n font-size: 0.85rem;\\n line-height: var(--tooltip-height);\\n border-radius: 999px;\\n visibility: hidden;\\n clip-path: inset(0 0 100% 0 round 999px);\\n transform: translateY(8px);\\n transition:\\n clip-path 0.35s ease,\\n transform 0.35s ease,\\n visibility 0s linear 0.35s;\\n}\\n\\n.basic-button::after {\\n position: absolute;\\n content: \\\"\\\";\\n width: 14px;\\n height: 14px;\\n left: calc(50% - 7px);\\n bottom: calc(100% + var(--tooltip-gap) - 6px);\\n z-index: 2;\\n background: var(--tooltip-color);\\n border-radius: 2px;\\n visibility: hidden;\\n transform: translateY(8px) rotate(45deg) scale(0);\\n transition:\\n transform 0.35s ease,\\n visibility 0s linear 0.35s;\\n}\\n\\n.button-wrapper,\\n.button-text,\\n.button-icon {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n left: 0;\\n overflow: hidden;\\n color: #ffffff;\\n}\\n\\n.button-wrapper {\\n top: 0;\\n border-radius: inherit;\\n}\\n\\n.button-text {\\n top: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 15px;\\n font-weight: 600;\\n transition: top 0.45s ease;\\n}\\n\\n.button-icon {\\n top: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: top 0.45s ease;\\n}\\n\\n.button-icon svg {\\n width: 23px;\\n height: 23px;\\n}\\n\\n.basic-button:hover {\\n background: #111111;\\n transform: translateY(-1px);\\n}\\n\\n.basic-button:hover .button-text {\\n top: -100%;\\n}\\n\\n.basic-button:hover .button-icon {\\n top: 0;\\n}\\n\\n.basic-button:hover::before {\\n visibility: visible;\\n clip-path: inset(0 0 0 0 round 999px);\\n transform: translateY(0);\\n transition-delay: 0s, 0s, 0s;\\n}\\n\\n.basic-button:hover::after {\\n visibility: visible;\\n transform: translateY(0) rotate(45deg) scale(1);\\n transition-delay: 0s, 0s;\\n}\\n\\n.basic-button:active {\\n transform: scale(0.97);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .basic-button,\\n .basic-button::before,\\n .basic-button::after,\\n .button-text,\\n .button-icon {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5491a8cf-7a32-4fda-8cc6-41944576de6c","type":"divider","props":{},"children":[]},{"id":"d5509535-218c-4a99-a132-89db00d201e9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"3d625869-5e6c-443f-a3bc-d39498ae2d3b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is a basic rounded tooltip button. It starts as a black pill button with text, then on hover the text slides out, the arrow icon slides in, and a rounded tooltip appears above it.","styles":{}}],"children":[]},{"id":"37c804cc-80e9-473d-9e04-9bd5c93df349","type":"procode","props":{"code":".basic-button {\n --button-color: #111111;\n --tooltip-color: #333333;\n\n background: var(--button-color);\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jg8hhcv5n\",\"name\":\"code\",\"code\":\".basic-button {\\n --button-color: #111111;\\n --tooltip-color: #333333;\\n\\n background: var(--button-color);\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d30dc7ec-af64-4343-b3ac-7289fe46d742","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The button is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the button in the middle.","styles":{}}],"children":[]},{"id":"88e7b5ae-6583-4e8c-84f1-1656c629bb52","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ss6h2eb8z\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"04e4b11a-9e0a-4f7d-9d63-040a3546d0f6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".basic-button","styles":{"code":true}},{"type":"text","text":" is the main button container. It uses fixed width and height, rounded corners, and ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" so the tooltip and inner content can be positioned inside it.","styles":{}}],"children":[]},{"id":"60304f7d-bd42-457b-9e2d-fbd4f08753d2","type":"procode","props":{"code":".basic-button {\n --width: 120px;\n --height: 42px;\n --tooltip-height: 34px;\n --tooltip-width: 82px;\n --tooltip-gap: 16px;\n --button-color: #111111;\n --tooltip-color: #333333;\n\n width: var(--width);\n height: var(--height);\n position: relative;\n background: var(--button-color);\n text-align: center;\n border-radius: 999px;\n font-family: Arial, Helvetica, sans-serif;\n cursor: pointer;\n}","language":"javascript","filename":"","files":"[{\"id\":\"tf4uifyuh\",\"name\":\"code\",\"code\":\".basic-button {\\n --width: 120px;\\n --height: 42px;\\n --tooltip-height: 34px;\\n --tooltip-width: 82px;\\n --tooltip-gap: 16px;\\n --button-color: #111111;\\n --tooltip-color: #333333;\\n\\n width: var(--width);\\n height: var(--height);\\n position: relative;\\n background: var(--button-color);\\n text-align: center;\\n border-radius: 999px;\\n font-family: Arial, Helvetica, sans-serif;\\n cursor: pointer;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"810d7d3b-2ed9-4f5c-aadf-79e6fae37dd6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" Is Important\n","styles":{"bold":true}},{"type":"text","text":"The tooltip, tooltip arrow, button text, and button icon are absolutely positioned. They need ","styles":{}},{"type":"text","text":".basic-button","styles":{"code":true}},{"type":"text","text":" as the positioning parent.","styles":{}}],"children":[]},{"id":"00b705a9-c441-4c86-9287-4f71d365e788","type":"procode","props":{"code":".basic-button {\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"5kfgb9gof\",\"name\":\"code\",\"code\":\".basic-button {\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41159b75-9515-4965-b85a-d0d60ffd1d20","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tooltip Text\n","styles":{"bold":true}},{"type":"text","text":"The tooltip text is created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":". It gets its content from the ","styles":{}},{"type":"text","text":"data-tooltip","styles":{"code":true}},{"type":"text","text":" attribute in the HTML.","styles":{}}],"children":[]},{"id":"93ba78d3-a3c5-413c-8c42-3454b463687b","type":"procode","props":{"code":"

","language":"javascript","filename":"","files":"[{\"id\":\"6wmlckwsj\",\"name\":\"code\",\"code\":\"

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b2a13756-fe46-4e96-ae5a-e6d314951d54","type":"procode","props":{"code":".basic-button::before {\n position: absolute;\n content: attr(data-tooltip);\n width: var(--tooltip-width);\n height: var(--tooltip-height);\n left: calc(50% - var(--tooltip-width) / 2);\n bottom: calc(100% + var(--tooltip-gap));\n z-index: 3;\n background: var(--tooltip-color);\n color: #ffffff;\n font-size: 0.85rem;\n line-height: var(--tooltip-height);\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hw2er0dvm\",\"name\":\"code\",\"code\":\".basic-button::before {\\n position: absolute;\\n content: attr(data-tooltip);\\n width: var(--tooltip-width);\\n height: var(--tooltip-height);\\n left: calc(50% - var(--tooltip-width) / 2);\\n bottom: calc(100% + var(--tooltip-gap));\\n z-index: 3;\\n background: var(--tooltip-color);\\n color: #ffffff;\\n font-size: 0.85rem;\\n line-height: var(--tooltip-height);\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca5e0593-d590-4a40-9b0c-a51c9835764e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tooltip Hidden State\n","styles":{"bold":true}},{"type":"text","text":"The tooltip starts hidden using ","styles":{}},{"type":"text","text":"visibility: hidden","styles":{"code":true}},{"type":"text","text":", clipped from the bottom, and moved down slightly.","styles":{}}],"children":[]},{"id":"ad34e162-f1f8-48f1-b21d-547135ccea93","type":"procode","props":{"code":".basic-button::before {\n visibility: hidden;\n clip-path: inset(0 0 100% 0 round 999px);\n transform: translateY(8px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"gz4pbn6eg\",\"name\":\"code\",\"code\":\".basic-button::before {\\n visibility: hidden;\\n clip-path: inset(0 0 100% 0 round 999px);\\n transform: translateY(8px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75db861b-3461-44ba-a61c-734b11218c80","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tooltip Arrow\n","styles":{"bold":true}},{"type":"text","text":"The tooltip pointer is created with ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":". It is a small square rotated ","styles":{}},{"type":"text","text":"45deg","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"43fa20c6-f607-418e-bab9-68be58bbfc56","type":"procode","props":{"code":".basic-button::after {\n position: absolute;\n content: \"\";\n width: 14px;\n height: 14px;\n left: calc(50% - 7px);\n bottom: calc(100% + var(--tooltip-gap) - 6px);\n z-index: 2;\n background: var(--tooltip-color);\n border-radius: 2px;\n visibility: hidden;\n transform: translateY(8px) rotate(45deg) scale(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"obqnqjilq\",\"name\":\"code\",\"code\":\".basic-button::after {\\n position: absolute;\\n content: \\\"\\\";\\n width: 14px;\\n height: 14px;\\n left: calc(50% - 7px);\\n bottom: calc(100% + var(--tooltip-gap) - 6px);\\n z-index: 2;\\n background: var(--tooltip-color);\\n border-radius: 2px;\\n visibility: hidden;\\n transform: translateY(8px) rotate(45deg) scale(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4b2fc4c9-9954-4051-b09d-adfb185f3a4d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Inner Wrapper\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-wrapper","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":".button-text","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":".button-icon","styles":{"code":true}},{"type":"text","text":" are absolute layers that fill the full button area.","styles":{}}],"children":[]},{"id":"9f5c260a-7944-44fe-bd0a-3e4b3b94ff51","type":"procode","props":{"code":".button-wrapper,\n.button-text,\n.button-icon {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n overflow: hidden;\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o530kgbg1\",\"name\":\"code\",\"code\":\".button-wrapper,\\n.button-text,\\n.button-icon {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n left: 0;\\n overflow: hidden;\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3da44f43-7618-4455-8e40-460714ff2dd5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Base State\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-text","styles":{"code":true}},{"type":"text","text":" starts visible at ","styles":{}},{"type":"text","text":"top: 0","styles":{"code":true}},{"type":"text","text":". It is centered using Flexbox.","styles":{}}],"children":[]},{"id":"e93ade90-3664-4682-9317-79cc45d74e56","type":"procode","props":{"code":".button-text {\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 15px;\n font-weight: 600;\n transition: top 0.45s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ywzsweyn9\",\"name\":\"code\",\"code\":\".button-text {\\n top: 0;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 15px;\\n font-weight: 600;\\n transition: top 0.45s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"96443021-40eb-4146-9a8d-93a7fb8d1805","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Base State\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-icon","styles":{"code":true}},{"type":"text","text":" starts below the button at ","styles":{}},{"type":"text","text":"top: 100%","styles":{"code":true}},{"type":"text","text":", so it is hidden before hover.","styles":{}}],"children":[]},{"id":"c49afbf1-d9db-450d-a46c-b81e02ed01fc","type":"procode","props":{"code":".button-icon {\n top: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: top 0.45s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"em9e2219i\",\"name\":\"code\",\"code\":\".button-icon {\\n top: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: top 0.45s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9cd4d39b-bb51-4619-8513-0288818472e1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Size\n","styles":{"bold":true}},{"type":"text","text":"The arrow SVG is sized to ","styles":{}},{"type":"text","text":"23px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f89d14dd-e67d-46ee-8ab6-2cd886f1e098","type":"procode","props":{"code":".button-icon svg {\n width: 23px;\n height: 23px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"kg43lxclo\",\"name\":\"code\",\"code\":\".button-icon svg {\\n width: 23px;\\n height: 23px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5f81cf7d-a96b-4cd7-805b-33f922f8768d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the button moves up slightly.","styles":{}}],"children":[]},{"id":"c52e82b9-4c32-4428-91bb-af5f1159c360","type":"procode","props":{"code":".basic-button:hover {\n background: #111111;\n transform: translateY(-1px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"qdd4qh5au\",\"name\":\"code\",\"code\":\".basic-button:hover {\\n background: #111111;\\n transform: translateY(-1px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2a613d88-1d1c-4ebf-b979-718527f7e45d","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the text moves upward and leaves the button.","styles":{}}],"children":[]},{"id":"c89ea16e-9b92-419b-b014-9ccdadeec47b","type":"procode","props":{"code":".basic-button:hover .button-text {\n top: -100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"b16db77c6\",\"name\":\"code\",\"code\":\".basic-button:hover .button-text {\\n top: -100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1ac25237-d382-4f90-9f11-980cbc499c89","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the icon moves into the button from below.","styles":{}}],"children":[]},{"id":"747112fd-f23c-4a15-8ec1-205aed5e06a6","type":"procode","props":{"code":".basic-button:hover .button-icon {\n top: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"51i56znrt\",\"name\":\"code\",\"code\":\".basic-button:hover .button-icon {\\n top: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"77413ad8-6dd0-430d-b2b0-c3f1a1a2152a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tooltip Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the tooltip becomes visible, unclipped, and moves into its final position.","styles":{}}],"children":[]},{"id":"515ebe2d-73d9-45d5-ac1a-88b58ef5bdec","type":"procode","props":{"code":".basic-button:hover::before {\n visibility: visible;\n clip-path: inset(0 0 0 0 round 999px);\n transform: translateY(0);\n transition-delay: 0s, 0s, 0s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"16ogiu6zk\",\"name\":\"code\",\"code\":\".basic-button:hover::before {\\n visibility: visible;\\n clip-path: inset(0 0 0 0 round 999px);\\n transform: translateY(0);\\n transition-delay: 0s, 0s, 0s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4404df23-af82-44d3-b4ca-e1b9838c1bd9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Tooltip Arrow Hover State\n","styles":{"bold":true}},{"type":"text","text":"On hover, the tooltip arrow becomes visible and scales up.","styles":{}}],"children":[]},{"id":"bbd23db6-6931-4c0b-b585-acf6d980e758","type":"procode","props":{"code":".basic-button:hover::after {\n visibility: visible;\n transform: translateY(0) rotate(45deg) scale(1);\n transition-delay: 0s, 0s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"wz7qa1j2u\",\"name\":\"code\",\"code\":\".basic-button:hover::after {\\n visibility: visible;\\n transform: translateY(0) rotate(45deg) scale(1);\\n transition-delay: 0s, 0s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"43342c29-3da7-472d-98bb-43d5e9f87aa5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active / Pressed State\n","styles":{"bold":true}},{"type":"text","text":"On click, the button scales down slightly.","styles":{}}],"children":[]},{"id":"5febbdf6-3ea2-4229-ab92-908eeb2210ae","type":"procode","props":{"code":".basic-button:active {\n transform: scale(0.97);\n}","language":"javascript","filename":"","files":"[{\"id\":\"68dmeea3d\",\"name\":\"code\",\"code\":\".basic-button:active {\\n transform: scale(0.97);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"24190d5d-2c08-4abc-876d-6605d5a8f25e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main interaction flow. The text slides out, the icon slides in, and the tooltip opens above the button.","styles":{}}],"children":[]},{"id":"df150401-85f4-4ecc-8e85-9242faed066a","type":"procode","props":{"code":".basic-button:hover .button-text {\n top: -100%;\n}\n\n.basic-button:hover .button-icon {\n top: 0;\n}\n\n.basic-button:hover::before {\n visibility: visible;\n clip-path: inset(0 0 0 0 round 999px);\n transform: translateY(0);\n}\n\n.basic-button:hover::after {\n visibility: visible;\n transform: translateY(0) rotate(45deg) scale(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"5zz0o4pyc\",\"name\":\"code\",\"code\":\".basic-button:hover .button-text {\\n top: -100%;\\n}\\n\\n.basic-button:hover .button-icon {\\n top: 0;\\n}\\n\\n.basic-button:hover::before {\\n visibility: visible;\\n clip-path: inset(0 0 0 0 round 999px);\\n transform: translateY(0);\\n}\\n\\n.basic-button:hover::after {\\n visibility: visible;\\n transform: translateY(0) rotate(45deg) scale(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9586f83e-c133-41c6-8641-d36e7a4a25ae","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"clip-path","styles":{"code":true}},{"type":"text","text":" Is Used\n","styles":{"bold":true}},{"type":"text","text":"The tooltip uses ","styles":{}},{"type":"text","text":"clip-path","styles":{"code":true}},{"type":"text","text":" instead of opacity. It reveals the tooltip by opening the clipped area from hidden to full size.","styles":{}}],"children":[]},{"id":"dfbfbacb-d879-4dea-8ba6-dcae8ba0308a","type":"procode","props":{"code":".basic-button::before {\n clip-path: inset(0 0 100% 0 round 999px);\n}\n\n.basic-button:hover::before {\n clip-path: inset(0 0 0 0 round 999px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"slbuje3bs\",\"name\":\"code\",\"code\":\".basic-button::before {\\n clip-path: inset(0 0 100% 0 round 999px);\\n}\\n\\n.basic-button:hover::before {\\n clip-path: inset(0 0 0 0 round 999px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f9ca03e3-3a5a-4296-bdaa-ca25f8be05b8","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"visibility","styles":{"code":true}},{"type":"text","text":" Has Delay\n","styles":{"bold":true}},{"type":"text","text":"The tooltip hides only after the animation finishes. This prevents it from disappearing instantly during hover out.","styles":{}}],"children":[]},{"id":"81818ab6-cb13-4058-a000-3746c65b659f","type":"procode","props":{"code":".basic-button::before {\n transition:\n clip-path 0.35s ease,\n transform 0.35s ease,\n visibility 0s linear 0.35s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"g4cxipslk\",\"name\":\"code\",\"code\":\".basic-button::before {\\n transition:\\n clip-path 0.35s ease,\\n transform 0.35s ease,\\n visibility 0s linear 0.35s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ee93cfab-41b2-4826-99b7-accea678cde4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The button background and movement use ","styles":{}},{"type":"text","text":"0.3s","styles":{"code":true}},{"type":"text","text":". The text/icon slide uses ","styles":{}},{"type":"text","text":"0.45s","styles":{"code":true}},{"type":"text","text":". The tooltip reveal uses ","styles":{}},{"type":"text","text":"0.35s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"dc748923-9a24-44e6-9c20-c4b7e9cfc306","type":"procode","props":{"code":".basic-button {\n transition:\n background 0.3s ease,\n transform 0.3s ease;\n}\n\n.button-text,\n.button-icon {\n transition: top 0.45s ease;\n}\n\n.basic-button::before {\n transition:\n clip-path 0.35s ease,\n transform 0.35s ease,\n visibility 0s linear 0.35s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ek7k9kp35\",\"name\":\"code\",\"code\":\".basic-button {\\n transition:\\n background 0.3s ease,\\n transform 0.3s ease;\\n}\\n\\n.button-text,\\n.button-icon {\\n transition: top 0.45s ease;\\n}\\n\\n.basic-button::before {\\n transition:\\n clip-path 0.35s ease,\\n transform 0.35s ease,\\n visibility 0s linear 0.35s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4946fb0f-af8a-438e-b9af-8368a2696c8a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"If the user prefers reduced motion, all transitions are removed.","styles":{}}],"children":[]},{"id":"8155607b-7fca-4f2d-a060-365f4be71860","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .basic-button,\n .basic-button::before,\n .basic-button::after,\n .button-text,\n .button-icon {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"0gxqoah40\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .basic-button,\\n .basic-button::before,\\n .basic-button::after,\\n .button-text,\\n .button-icon {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18166b22-9fb6-47d3-b21a-1d63bc2b85f2","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the text and icon slide speed here:","styles":{}}],"children":[]},{"id":"9e1ec356-dc16-4554-ba02-91f55ede1959","type":"procode","props":{"code":".button-text,\n.button-icon {\n transition: top 0.45s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"j07enhkb6\",\"name\":\"code\",\"code\":\".button-text,\\n.button-icon {\\n transition: top 0.45s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"85737e8c-aa14-4040-ad23-29ea41e453c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the tooltip reveal speed here:","styles":{}}],"children":[]},{"id":"c2d6b2a1-90cb-4ff5-9215-0ed5888fed0d","type":"procode","props":{"code":".basic-button::before {\n transition:\n clip-path 0.35s ease,\n transform 0.35s ease,\n visibility 0s linear 0.35s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"f9fkkifle\",\"name\":\"code\",\"code\":\".basic-button::before {\\n transition:\\n clip-path 0.35s ease,\\n transform 0.35s ease,\\n visibility 0s linear 0.35s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d731749-a973-4b2f-8962-b526544c7ada","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the button color here:","styles":{}}],"children":[]},{"id":"3e27a21f-8030-4067-8674-a5934fac4baa","type":"procode","props":{"code":".basic-button {\n --button-color: #111111;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rtpcovxe5\",\"name\":\"code\",\"code\":\".basic-button {\\n --button-color: #111111;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f84c642a-22c8-43c2-b86e-788aaeb8e4b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the tooltip color here:","styles":{}}],"children":[]},{"id":"e024efa2-333b-43e4-940b-1fea90574bc8","type":"procode","props":{"code":".basic-button {\n --tooltip-color: #333333;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rbgb56oas\",\"name\":\"code\",\"code\":\".basic-button {\\n --tooltip-color: #333333;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5c18d539-9003-4b63-b33c-9064bc42c1a9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the text and icon color here:","styles":{}}],"children":[]},{"id":"a93220b0-d507-4c6f-88b6-bbbe99f7c396","type":"procode","props":{"code":".button-wrapper,\n.button-text,\n.button-icon {\n color: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dbg2jzl0p\",\"name\":\"code\",\"code\":\".button-wrapper,\\n.button-text,\\n.button-icon {\\n color: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1c3d34d4-fb94-460b-bb26-60190411121e","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 size here:","styles":{}}],"children":[]},{"id":"2581e986-2686-461f-b81f-7277fff72098","type":"procode","props":{"code":".basic-button {\n --width: 120px;\n --height: 42px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mb4q2l4v9\",\"name\":\"code\",\"code\":\".basic-button {\\n --width: 120px;\\n --height: 42px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7abf99a0-e571-47ec-9484-557e78662c28","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the tooltip size here:","styles":{}}],"children":[]},{"id":"c9471c49-1045-43aa-be0c-3801e8bab4e5","type":"procode","props":{"code":".basic-button {\n --tooltip-height: 34px;\n --tooltip-width: 82px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"jiygxcrqp\",\"name\":\"code\",\"code\":\".basic-button {\\n --tooltip-height: 34px;\\n --tooltip-width: 82px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"590b59b4-f096-48f5-837c-34e388ef68b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the tooltip gap here:","styles":{}}],"children":[]},{"id":"9d232b79-17f2-44b4-85f6-5b9737575e9c","type":"procode","props":{"code":".basic-button {\n --tooltip-gap: 16px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"x5sgkf0q7\",\"name\":\"code\",\"code\":\".basic-button {\\n --tooltip-gap: 16px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fdc7a745-2231-4938-8049-021c9bc5568a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the pill shape here:","styles":{}}],"children":[]},{"id":"deb3290e-7245-4b52-926e-2d8ed1425fc7","type":"procode","props":{"code":".basic-button {\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"d6ganh27c\",\"name\":\"code\",\"code\":\".basic-button {\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cd427f89-de61-478d-b176-228773f5015b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the button text here:","styles":{}}],"children":[]},{"id":"61390d8f-bf61-438a-9387-0431763e3525","type":"procode","props":{"code":"

Button

","language":"javascript","filename":"","files":"[{\"id\":\"j354a1ucw\",\"name\":\"code\",\"code\":\"

Button

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3ca149fc-e4fa-457f-b721-82d8d90b644e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the tooltip text here:","styles":{}}],"children":[]},{"id":"84d8e069-ee0c-4688-8a7d-5db859a7e13e","type":"procode","props":{"code":"

","language":"javascript","filename":"","files":"[{\"id\":\"hor21ila6\",\"name\":\"code\",\"code\":\"

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3fb7de27-ed63-44e9-8698-fd7226a9e026","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon / Content\n","styles":{"bold":true}},{"type":"text","text":"The icon is an inline SVG arrow.","styles":{}}],"children":[]},{"id":"68e645be-0d7d-4253-9e5a-c5aea0804349","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"hevamg32g\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc364703-e3e4-4432-8e5d-c54804e00f3d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]