Skew Fill Button

[{"id":"a3ce26c7-be09-4b03-9fdb-e651f866e8ed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"e7f0bf5e-87a4-4c0a-a2d2-8cf33aca3488","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --button-bg: #5d3fd3;\\n --button-fill: #000000;\\n --button-text: ghostwhite;\\n --button-hover-text: #ffff;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\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.skew-button {\\n outline: none;\\n cursor: pointer;\\n border: none;\\n padding: 0.9rem 2rem;\\n margin: 0;\\n font-family: inherit;\\n position: relative;\\n display: inline-block;\\n letter-spacing: 0.05rem;\\n font-weight: 700;\\n font-size: 17px;\\n border-radius: 500px;\\n overflow: hidden;\\n background: var(--button-bg);\\n color: var(--button-text);\\n -webkit-tap-highlight-color: transparent;\\n\\n transition: transform 0.1s ease;\\n}\\n\\n.skew-button:active {\\n transform: scale(0.93);\\n}\\n\\n.skew-button span {\\n position: relative;\\n z-index: 10;\\n transition: color 0.4s;\\n}\\n\\n.skew-button:hover span {\\n color: var(--button-hover-text);\\n}\\n\\n.skew-button::before,\\n.skew-button::after {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n z-index: 0;\\n}\\n\\n.skew-button::before {\\n content: \\\"\\\";\\n background: var(--button-fill);\\n width: 120%;\\n left: -10%;\\n transform: skew(30deg);\\n transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);\\n}\\n\\n.skew-button:hover::before {\\n transform: translate3d(100%, 0, 0);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .skew-button span,\\n .skew-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Skew Fill 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":"7f64f5a0-0350-41d2-a6e5-2b234cc4786b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"43c4b56f-32c2-41ad-bbf0-384e4097a516","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"7ddbc208-0eed-4cc9-bd06-bc2b2249ebec","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\\n\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c251f4eb-d96e-4a51-95ee-c84734eb630b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"8e4b6c3a-200a-4f74-b0fc-9be186dcacd4","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --button-bg: #5D3FD3;\\n --button-fill: #000000;\\n --button-text: ghostwhite;\\n --button-hover-text: #ffff;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\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.skew-button {\\n outline: none;\\n cursor: pointer;\\n border: none;\\n padding: 0.9rem 2rem;\\n margin: 0;\\n font-family: inherit;\\n position: relative;\\n display: inline-block;\\n letter-spacing: 0.05rem;\\n font-weight: 700;\\n font-size: 17px;\\n border-radius: 500px;\\n overflow: hidden;\\n background: var(--button-bg);\\n color: var(--button-text);\\n}\\n\\n.skew-button span {\\n position: relative;\\n z-index: 10;\\n transition: color 0.4s;\\n}\\n\\n.skew-button:hover span {\\n color: var(--button-hover-text);\\n}\\n\\n.skew-button::before,\\n.skew-button::after {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n z-index: 0;\\n}\\n\\n.skew-button::before {\\n content: \\\"\\\";\\n background: var(--button-fill);\\n width: 120%;\\n left: -10%;\\n transform: skew(30deg);\\n transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);\\n}\\n\\n.skew-button:hover::before {\\n transform: translate3d(100%, 0, 0);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .skew-button span,\\n .skew-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"69d5d4cc-2903-45df-80de-180197109865","type":"divider","props":{},"children":[]},{"id":"38d05b0f-c792-45cf-b852-e680aa53a706","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"2e07be6c-8355-46af-8edd-a46819aea65c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]