Lift Hover Button

[{"id":"d42a19c3-4dcc-48eb-acbd-69ec36886e8e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ed26a893-4347-4e1a-899e-1f7820875ea2","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.btn {\\n position: relative;\\n z-index: 1;\\n font-size: 17px;\\n text-transform: uppercase;\\n text-decoration: none;\\n padding: 1em 2.5em;\\n display: inline-block;\\n cursor: pointer;\\n border-radius: 6em;\\n transition: all 0.2s;\\n border: none;\\n font-family: inherit;\\n font-weight: 500;\\n color: black;\\n background-color: white;\\n}\\n\\n.btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);\\n}\\n\\n.btn:active {\\n transform: translateY(-1px);\\n box-shadow: 0 5px 10px rgba(255, 255, 255, 0.15);\\n}\\n\\n.btn::after {\\n content: \\\"\\\";\\n display: inline-block;\\n height: 100%;\\n width: 100%;\\n border-radius: 100px;\\n position: absolute;\\n top: 0;\\n left: 0;\\n z-index: -1;\\n transition: all 0.4s;\\n background-color: #fff;\\n}\\n\\n.btn:hover::after {\\n transform: scaleX(1.4) scaleY(1.6);\\n opacity: 0;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .btn,\\n .btn::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Lift 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":"9ba71e49-8fa5-42ec-8560-9635ffaec0a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7bd17d81-20e5-450a-aa04-4b483d88aed6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"d1bac6e0-9956-4e88-9323-7fb255901cbd","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8d6c8a54-3786-401d-bfea-1780967832e8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"89ddb86f-55a7-45b1-9185-31b8925ae88c","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.btn {\\n position: relative;\\n z-index: 1;\\n font-size: 17px;\\n text-transform: uppercase;\\n text-decoration: none;\\n padding: 1em 2.5em;\\n display: inline-block;\\n cursor: pointer;\\n border-radius: 6em;\\n transition: all 0.2s;\\n border: none;\\n font-family: inherit;\\n font-weight: 500;\\n color: black;\\n background-color: white;\\n}\\n\\n.btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);\\n}\\n\\n.btn:active {\\n transform: translateY(-1px);\\n box-shadow: 0 5px 10px rgba(255, 255, 255, 0.15);\\n}\\n\\n.btn::after {\\n content: \\\"\\\";\\n display: inline-block;\\n height: 100%;\\n width: 100%;\\n border-radius: 100px;\\n position: absolute;\\n top: 0;\\n left: 0;\\n z-index: -1;\\n transition: all 0.4s;\\n background-color: #fff;\\n}\\n\\n.btn:hover::after {\\n transform: scaleX(1.4) scaleY(1.6);\\n opacity: 0;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .btn,\\n .btn::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"62edd2fb-55f9-43bc-ac1b-3971da80f640","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[],"children":[]},{"id":"3e18310c-c87c-4e73-a476-186cf0f8b8ed","type":"divider","props":{},"children":[]},{"id":"a8f05b3a-b4d9-42a6-9c09-88ad855b229d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"6a3bf31d-5459-4d9e-a042-0dc84cf84940","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button uses one HTML element.","styles":{}}],"children":[]},{"id":"6054bcbe-289d-498a-b81d-ca87f0da3c35","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"uug6f4fnq\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a4fc366-673e-4947-9fda-e8c8f5346d47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe ","styles":{}},{"type":"text","text":"body","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":".demo-wrap","styles":{"code":true}},{"type":"text","text":" center the button in the page.","styles":{}}],"children":[]},{"id":"f65d9937-c55a-4af7-bd35-205293b89b4b","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\":\"t4yuiqyar\",\"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":"58cdd871-a4af-4aa1-9096-bce5fd4d40cb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n\nThe ","styles":{}},{"type":"text","text":".btn","styles":{"code":true}},{"type":"text","text":" is a white pill button with uppercase text.","styles":{}}],"children":[]},{"id":"204fae44-13c7-4756-9b27-e232b2ceb904","type":"procode","props":{"code":".btn {\n padding: 1em 2.5em;\n border-radius: 6em;\n color: black;\n background-color: white;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ry62bt9th\",\"name\":\"code\",\"code\":\".btn {\\n padding: 1em 2.5em;\\n border-radius: 6em;\\n color: black;\\n background-color: white;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59fa0338-e234-40b5-95f5-ada0ed8f5544","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Lift\n\nOn hover, the button moves upward by ","styles":{}},{"type":"text","text":"3px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"2dc8ec04-a3c1-4616-a3ef-37396dad125f","type":"procode","props":{"code":".btn:hover {\n transform: translateY(-3px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"n4rfrhjmk\",\"name\":\"code\",\"code\":\".btn:hover {\\n transform: translateY(-3px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e102ed0a-517c-4f4b-bb41-af7afb326977","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press\n\nOn click, the button moves slightly down from the hover position.","styles":{}}],"children":[]},{"id":"c4872537-76b9-4b03-a489-672708c1f2d4","type":"procode","props":{"code":".btn:active {\n transform: translateY(-1px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"odgsxzoii\",\"name\":\"code\",\"code\":\".btn:active {\\n transform: translateY(-1px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0908d598-09c6-454a-a3f0-1ef4578cc6fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Pulse Layer\n\nThe ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" pseudo-element creates the expanding white background effect.","styles":{}}],"children":[]},{"id":"7dd1b95b-a18d-4e03-bf8a-6bb83788dda2","type":"procode","props":{"code":".btn::after {\n position: absolute;\n inset: 0;\n z-index: -1;\n background-color: #fff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"7isk5b0wl\",\"name\":\"code\",\"code\":\".btn::after {\\n position: absolute;\\n inset: 0;\\n z-index: -1;\\n background-color: #fff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c6d325eb-2654-41bc-b54f-d3a089ccf656","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Pulse\n\nWhen hovered, the pseudo-element scales outward and fades.","styles":{}}],"children":[]},{"id":"f211e80b-8fe6-49db-8dc7-a738c6b935f3","type":"procode","props":{"code":".btn:hover::after {\n transform: scaleX(1.4) scaleY(1.6);\n opacity: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"m8ox3bwdx\",\"name\":\"code\",\"code\":\".btn:hover::after {\\n transform: scaleX(1.4) scaleY(1.6);\\n opacity: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d6658f3b-3dde-41be-8dd6-a277b87a6ef3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]