Hover Bottom Glow Button

[{"id":"ee0fc6e7-647e-4e01-ad8f-3dab70595da6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"293d2b3c-f15e-4959-865d-2a1cf2a85100","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0a66bb51-5c4d-43d2-b9e6-02b170d0d61e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a3e934d6-d780-402d-b512-cd858ead5ad6","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: #050505;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.button-preview {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n padding: 32px;\\n overflow: hidden;\\n}\\n\\n.glow-button-wrap {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n isolation: isolate;\\n}\\n\\n/* Soft bottom glow, hidden by default */\\n.bottom-glow {\\n position: absolute;\\n left: 50%;\\n bottom: -18px;\\n z-index: 0;\\n\\n width: 132px;\\n height: 26px;\\n\\n border-radius: 999px;\\n background: rgba(255, 255, 255, 0.48);\\n\\n filter: blur(22px);\\n opacity: 0;\\n\\n transform: translateX(-50%) scaleX(0.86);\\n pointer-events: none;\\n\\n transition:\\n opacity 320ms ease,\\n transform 320ms ease,\\n filter 320ms ease;\\n}\\n\\n/* Show soft glow only on hover */\\n.glow-button-wrap:hover .bottom-glow {\\n opacity: 0.72;\\n transform: translateX(-50%) scaleX(1);\\n filter: blur(24px);\\n}\\n\\n.glow-button {\\n position: relative;\\n z-index: 1;\\n\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n height: 48px;\\n padding: 0 28px;\\n\\n border: 0;\\n border-radius: 8px;\\n\\n background: linear-gradient(180deg, #f4f4f5 0%, #d9d9dc 100%);\\n color: #020617;\\n\\n font-size: 14px;\\n font-weight: 600;\\n\\n cursor: pointer;\\n\\n box-shadow:\\n inset 0 1px 0 rgba(255, 255, 255, 0.95),\\n inset 0 -1px 0 rgba(0, 0, 0, 0.08);\\n\\n transition:\\n transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),\\n background 220ms ease,\\n box-shadow 220ms ease;\\n}\\n\\n.glow-button-wrap:hover .glow-button {\\n transform: translateY(-1px);\\n background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%);\\n}\\n\\n.glow-button:active {\\n transform: translateY(0) scale(0.98);\\n}\\n\\n.glow-button:focus-visible {\\n outline: 2px solid #ffffff;\\n outline-offset: 4px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .bottom-glow,\\n .glow-button {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Hover Bottom Glow Button\\n \\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","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"e3b68670-2f16-4c13-a565-adb4e8917255","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"bd85ad6f-2ea2-49c6-9d8d-28cbb2231c81","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n
GSAP
\\n
\\n
Looping
\\n
\\n
Words
\\n
\\n
Selector
\\n
\\n
Made with
\\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d599ecfb-6bc7-4531-9312-d9eee68c0dd2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"ba4ca927-3f75-4476-95f7-4873b0cec60d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\".looping-words {\\n height: 2.7em;\\n padding-left: .1em;\\n padding-right: .1em;\\n font-family: PP Neue Corp Tight, Arial, sans-serif;\\n font-size: 10em;\\n font-weight: 700;\\n line-height: .9;\\n position: relative;\\n}\\n\\n.looping-words__list {\\n text-align: center;\\n text-transform: uppercase;\\n white-space: nowrap;\\n flex-flow: column;\\n align-items: center;\\n margin-top: 0;\\n margin-bottom: 0;\\n padding-left: 0;\\n list-style: none;\\n display: flex;\\n position: relative;\\n}\\n\\n.looping-words__fade {\\n pointer-events: none;\\n background-image: linear-gradient(rgb(230, 226, 247) 5%, rgba(230, 226, 247, 0) 40%, rgba(230, 226, 247, 0) 60%, rgb(230, 226, 247) 95%);\\n width: 100%;\\n height: 100%;\\n position: absolute;\\n top: 0;\\n left: 0;\\n}\\n\\n.looping-words__edge {\\n border-top: .035em solid #2600ff;\\n border-left: .035em solid #2600ff;\\n width: .125em;\\n height: .125em;\\n position: absolute;\\n top: 0;\\n left: 0;\\n}\\n\\n.looping-words__edge.is--2 {\\n left: auto;\\n right: 0;\\n transform: rotate(90deg);\\n}\\n\\n.looping-words__edge.is--3 {\\n inset: auto 0 0 auto;\\n transform: rotate(180deg);\\n}\\n\\n.looping-words__edge.is--4 {\\n top: auto;\\n bottom: 0;\\n transform: rotate(270deg);\\n}\\n\\n.looping-words__selector {\\n pointer-events: none;\\n width: 100%;\\n height: .9em;\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n}\\n\\n.looping-words__containers {\\n width: 100%;\\n height: 100%;\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.looping-words__p {\\n margin: 0;\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"026bcc20-2df8-4312-8117-03452d67dbcd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]