Layered Hover Button

[{"id":"b267d40a-8a8e-41cc-839e-8881af683a3f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"81582a7a-f7bb-4acc-b4f8-c64ccfb7aab8","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}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\nbutton {\\n all: unset;\\n}\\n\\n.button {\\n position: relative;\\n display: inline-flex;\\n height: 3.5rem;\\n align-items: center;\\n border-radius: 9999px;\\n padding-left: 2rem;\\n padding-right: 2rem;\\n font-family: Segoe UI;\\n font-size: 1.2rem;\\n font-weight: 640;\\n color: #fafaf6;\\n letter-spacing: -0.06em;\\n cursor: pointer;\\n}\\n\\n.button-item {\\n background-color: transparent;\\n color: #ffffff;\\n}\\n\\n.button-item .button-bg {\\n border-color: #6d4aff;\\n background-color: #6d4aff;\\n}\\n\\n.button-inner,\\n.button-inner-hover,\\n.button-inner-static {\\n pointer-events: none;\\n display: block;\\n}\\n\\n.button-inner {\\n position: relative;\\n z-index: 2;\\n}\\n\\n.button-inner-static {\\n opacity: 1;\\n transform: translateY(0);\\n transition:\\n transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),\\n opacity 0.3s linear;\\n}\\n\\n.button-inner-hover {\\n position: absolute;\\n top: 0;\\n left: 0;\\n opacity: 0;\\n transform: translateY(70%);\\n transition:\\n transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),\\n opacity 0.3s linear;\\n}\\n\\n.button-bg {\\n overflow: hidden;\\n border-radius: 2rem;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n transform: scale(1);\\n transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);\\n}\\n\\n.button-bg,\\n.button-bg-layer,\\n.button-bg-layers {\\n display: block;\\n}\\n\\n.button-bg-layers {\\n position: absolute;\\n left: 50%;\\n transform: translate(-50%);\\n top: -60%;\\n aspect-ratio: 1 / 1;\\n width: max(200%, 10rem);\\n}\\n\\n.button-bg-layer {\\n border-radius: 9999px;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n transform: scale(0);\\n transition:\\n transform 1.3s cubic-bezier(0.19, 1, 0.22, 1),\\n opacity 0.3s linear;\\n}\\n\\n.button-bg-layer.-purple {\\n background-color: #ff4fd8;\\n}\\n\\n.button-bg-layer.-turquoise {\\n background-color: #32d6ff;\\n}\\n\\n.button-bg-layer.-yellow {\\n background-color: #111827;\\n}\\n\\n.button:hover .button-inner-static {\\n opacity: 0;\\n transform: translateY(-70%);\\n}\\n\\n.button:hover .button-inner-hover {\\n opacity: 1;\\n transform: translateY(0);\\n}\\n\\n.button:hover .button-bg-layer-1 {\\n transform: scale(1);\\n}\\n\\n.button:hover .button-bg-layer-2 {\\n transition-delay: 0.1s;\\n transform: scale(1);\\n}\\n\\n.button:hover .button-bg-layer-3 {\\n transition-delay: 0.2s;\\n transform: scale(1);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button,\\n .button-bg,\\n .button-bg-layer,\\n .button-inner-static,\\n .button-inner-hover {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Layered Hover 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":"6340dac4-a1c8-4390-8bad-db3936561898","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c7df79db-3a4e-4dc5-ac55-44fe1d5d1a8a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"8beee553-8bea-4081-9d2f-f4c790e34d12","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb2f64a7-d514-45d2-a4a4-a9ae9a4cdb75","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"e6058c37-01b5-4124-a406-f3818a72cf43","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}\\n\\n.demo-wrap {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\nbutton {\\n all: unset;\\n}\\n\\n.button {\\n position: relative;\\n display: inline-flex;\\n height: 3.5rem;\\n align-items: center;\\n border-radius: 9999px;\\n padding-left: 2rem;\\n padding-right: 2rem;\\n font-family: Segoe UI;\\n font-size: 1.2rem;\\n font-weight: 640;\\n color: #fafaf6;\\n letter-spacing: -0.06em;\\n cursor: pointer;\\n}\\n\\n.button-item {\\n background-color: transparent;\\n color: #ffffff;\\n}\\n\\n.button-item .button-bg {\\n border-color: #6d4aff;\\n background-color: #6d4aff;\\n}\\n\\n.button-inner,\\n.button-inner-hover,\\n.button-inner-static {\\n pointer-events: none;\\n display: block;\\n}\\n\\n.button-inner {\\n position: relative;\\n z-index: 2;\\n}\\n\\n.button-inner-static {\\n opacity: 1;\\n transform: translateY(0);\\n transition:\\n transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),\\n opacity 0.3s linear;\\n}\\n\\n.button-inner-hover {\\n position: absolute;\\n top: 0;\\n left: 0;\\n opacity: 0;\\n transform: translateY(70%);\\n transition:\\n transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),\\n opacity 0.3s linear;\\n}\\n\\n.button-bg {\\n overflow: hidden;\\n border-radius: 2rem;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n transform: scale(1);\\n transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);\\n}\\n\\n.button-bg,\\n.button-bg-layer,\\n.button-bg-layers {\\n display: block;\\n}\\n\\n.button-bg-layers {\\n position: absolute;\\n left: 50%;\\n transform: translate(-50%);\\n top: -60%;\\n aspect-ratio: 1 / 1;\\n width: max(200%, 10rem);\\n}\\n\\n.button-bg-layer {\\n border-radius: 9999px;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n transform: scale(0);\\n transition:\\n transform 1.3s cubic-bezier(0.19, 1, 0.22, 1),\\n opacity 0.3s linear;\\n}\\n\\n.button-bg-layer.-purple {\\n background-color: #ff4fd8;\\n}\\n\\n.button-bg-layer.-turquoise {\\n background-color: #32d6ff;\\n}\\n\\n.button-bg-layer.-yellow {\\n background-color: #111827;\\n}\\n\\n.button:hover .button-inner-static {\\n opacity: 0;\\n transform: translateY(-70%);\\n}\\n\\n.button:hover .button-inner-hover {\\n opacity: 1;\\n transform: translateY(0);\\n}\\n\\n.button:hover .button-bg-layer-1 {\\n transform: scale(1);\\n}\\n\\n.button:hover .button-bg-layer-2 {\\n transition-delay: 0.1s;\\n transform: scale(1);\\n}\\n\\n.button:hover .button-bg-layer-3 {\\n transition-delay: 0.2s;\\n transform: scale(1);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button,\\n .button-bg,\\n .button-bg-layer,\\n .button-inner-static,\\n .button-inner-hover {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fc5888af-e2cf-4bab-9b0e-d9352add6f4c","type":"divider","props":{},"children":[]},{"id":"bda8a362-23c5-49f9-9fec-9556988a9c6e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"f8ee2cbc-c353-497c-b3a7-88587299ed94","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The default button background is now purple.","styles":{}}],"children":[]},{"id":"b3fcc058-971b-4caa-aa9b-28707f96a48b","type":"procode","props":{"code":".button-item .button-bg {\n border-color: #6d4aff;\n background-color: #6d4aff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"q6djx4df7\",\"name\":\"code\",\"code\":\".button-item .button-bg {\\n border-color: #6d4aff;\\n background-color: #6d4aff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1665ec60-f3d1-4375-822e-7d6216d32242","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color Layers\n\nThe hover animation uses three different colors.","styles":{}}],"children":[]},{"id":"8f8dd5ef-2f12-4c39-95e6-0dcbda3915f6","type":"procode","props":{"code":".button-bg-layer.-purple {\n background-color: #ff4fd8;\n}\n\n.button-bg-layer.-turquoise {\n background-color: #32d6ff;\n}\n\n.button-bg-layer.-yellow {\n background-color: #111827;\n}","language":"javascript","filename":"","files":"[{\"id\":\"txz0dlfez\",\"name\":\"code\",\"code\":\".button-bg-layer.-purple {\\n background-color: #ff4fd8;\\n}\\n\\n.button-bg-layer.-turquoise {\\n background-color: #32d6ff;\\n}\\n\\n.button-bg-layer.-yellow {\\n background-color: #111827;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"344c5b1a-1120-40b1-9dd3-609ebe3db412","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The color flow is:","styles":{}}],"children":[]},{"id":"18ec393a-0956-49b7-9b0c-0c0f7d4f3f4f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default: purple\n\nLayer 1: pink\n\nLayer 2: cyan\n\nLayer 3: dark navy","styles":{}}],"children":[]},{"id":"e22ab198-9a4b-4376-80ce-0b67b5c2ec08","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe button is centered using the ","styles":{}},{"type":"text","text":"body","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":".demo-wrap","styles":{"code":true}},{"type":"text","text":" flex layout.","styles":{}}],"children":[]},{"id":"f40634cd-dc31-4e4c-82ec-7f1d99d572cb","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\":\"wlc7bmhsg\",\"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":"e14d736e-93bf-4c70-bae6-907cf1d4ff48","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n\nThe ","styles":{}},{"type":"text","text":"button","styles":{"code":true}},{"type":"text","text":" reset removes browser default button styles.","styles":{}}],"children":[]},{"id":"8d7453eb-e9f0-41a0-be49-b7989c60539e","type":"procode","props":{"code":"button {\n all: unset;\n}","language":"javascript","filename":"","files":"[{\"id\":\"2cqnneqa7\",\"name\":\"code\",\"code\":\"button {\\n all: unset;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5832322f-5e47-49df-b438-645083ec8b42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then ","styles":{}},{"type":"text","text":".button","styles":{"code":true}},{"type":"text","text":" creates the pill shape.","styles":{}}],"children":[]},{"id":"8912bf0f-dabb-450b-b816-e0d07bac163d","type":"procode","props":{"code":".button {\n height: 3.5rem;\n border-radius: 9999px;\n padding-left: 2rem;\n padding-right: 2rem;\n}","language":"javascript","filename":"","files":"[{\"id\":\"txvwx5nvw\",\"name\":\"code\",\"code\":\".button {\\n height: 3.5rem;\\n border-radius: 9999px;\\n padding-left: 2rem;\\n padding-right: 2rem;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1f3d2b12-5263-44c8-8065-c8d74f967b6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Background Layer System\n\nThe ","styles":{}},{"type":"text","text":".button-bg","styles":{"code":true}},{"type":"text","text":" fills the full button and clips the animated layers inside the pill.","styles":{}}],"children":[]},{"id":"b0a115be-83ec-48c0-a2db-cbbc7b060d01","type":"procode","props":{"code":".button-bg {\n overflow: hidden;\n border-radius: 2rem;\n position: absolute;\n width: 100%;\n height: 100%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"fg81z1i5b\",\"name\":\"code\",\"code\":\".button-bg {\\n overflow: hidden;\\n border-radius: 2rem;\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"170d1984-40ac-46e7-bbb8-8279c5bf36fa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".button-bg-layers","styles":{"code":true}},{"type":"text","text":" group is larger than the button, so the circular color layers can expand smoothly.","styles":{}}],"children":[]},{"id":"90c0de22-2c4e-4ad3-9e80-c97dc67a8c82","type":"procode","props":{"code":".button-bg-layers {\n top: -60%;\n aspect-ratio: 1 / 1;\n width: max(200%, 10rem);\n}","language":"javascript","filename":"","files":"[{\"id\":\"1wjztnmjy\",\"name\":\"code\",\"code\":\".button-bg-layers {\\n top: -60%;\\n aspect-ratio: 1 / 1;\\n width: max(200%, 10rem);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e6d1c5a6-8da2-4ea3-99bc-93a0a5aa3877","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Layer Animation\n\nEach background layer starts hidden with ","styles":{}},{"type":"text","text":"scale(0)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"938c76dc-53bf-45d0-b0df-d3d98d1c3e31","type":"procode","props":{"code":".button-bg-layer {\n transform: scale(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"53fymtr6u\",\"name\":\"code\",\"code\":\".button-bg-layer {\\n transform: scale(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"47fbeff4-132e-463e-990e-0741de45fc74","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the layers scale up one by one.","styles":{}}],"children":[]},{"id":"45d88ee0-b509-4aa3-851b-80bb945b594b","type":"procode","props":{"code":".button:hover .button-bg-layer-1 {\n transform: scale(1);\n}\n\n.button:hover .button-bg-layer-2 {\n transition-delay: 0.1s;\n transform: scale(1);\n}\n\n.button:hover .button-bg-layer-3 {\n transition-delay: 0.2s;\n transform: scale(1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"xl56x99x3\",\"name\":\"code\",\"code\":\".button:hover .button-bg-layer-1 {\\n transform: scale(1);\\n}\\n\\n.button:hover .button-bg-layer-2 {\\n transition-delay: 0.1s;\\n transform: scale(1);\\n}\\n\\n.button:hover .button-bg-layer-3 {\\n transition-delay: 0.2s;\\n transform: scale(1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb26a317-f1f4-4816-b790-52d7dd0660dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Animation\n\nThere are two text states.","styles":{}}],"children":[]},{"id":"9f09efc9-20ea-4643-a480-7fd767faf028","type":"procode","props":{"code":"Hover me\nHover me","language":"javascript","filename":"","files":"[{\"id\":\"zcw6vx1oe\",\"name\":\"code\",\"code\":\"Hover me\\nHover me\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4a1675d-ba3a-44b5-ad03-a970d3da29ff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The default text moves up on hover.","styles":{}}],"children":[]},{"id":"36c3ca7a-54e4-475a-8253-af88f22f9ed9","type":"procode","props":{"code":".button:hover .button-inner-static {\n opacity: 0;\n transform: translateY(-70%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"onn9y7x7m\",\"name\":\"code\",\"code\":\".button:hover .button-inner-static {\\n opacity: 0;\\n transform: translateY(-70%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4b0e811a-c2b2-4479-a74a-a9cdfe9427ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The hover text moves into place.","styles":{}}],"children":[]},{"id":"9299f94d-f0a1-4fb5-9d7e-0c21532b7b1a","type":"procode","props":{"code":".button:hover .button-inner-hover {\n opacity: 1;\n transform: translateY(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"dr1cptuhf\",\"name\":\"code\",\"code\":\".button:hover .button-inner-hover {\\n opacity: 1;\\n transform: translateY(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"108f234f-b571-47ea-9ca9-9c9a0de6650b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fix\n\nThe transitions are now placed on the normal state, not only inside ","styles":{}},{"type":"text","text":":hover","styles":{"code":true}},{"type":"text","text":". This makes the animation smooth both when entering and leaving hover.","styles":{}}],"children":[]},{"id":"b4286354-8352-4491-9259-a1359ab171cf","type":"procode","props":{"code":".button-inner-static,\n.button-inner-hover,\n.button-bg-layer {\n transition:\n transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),\n opacity 0.3s linear;\n}","language":"javascript","filename":"","files":"[{\"id\":\"mh8sbqghm\",\"name\":\"code\",\"code\":\".button-inner-static,\\n.button-inner-hover,\\n.button-bg-layer {\\n transition:\\n transform 1.4s cubic-bezier(0.19, 1, 0.22, 1),\\n opacity 0.3s linear;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"726da98a-6ac3-46c9-ae0f-8f38867467f7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]