Shine Hover Button

[{"id":"b248d3d4-82d6-4fa4-a574-97d69037319b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1a8bed6a-3cdd-4068-9a63-eacb407910d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"379208ec-4c5f-4492-9b63-35990e608bcc","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --shine-speed: 1000ms;\\n --button-bg: #3b82f6;\\n --button-hover-bg: rgba(59, 130, 246, 0.8);\\n --button-text: #ffffff;\\n --shine-color: rgba(255, 255, 255, 0.7);\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.shine-button-preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.shine-sweep-button {\\n position: relative;\\n height: 40px;\\n padding: 8px 16px;\\n border: 0;\\n border-radius: 6px;\\n background: var(--button-bg);\\n color: var(--button-text);\\n overflow: hidden;\\n cursor: pointer;\\n font-size: 14px;\\n font-weight: 500;\\n white-space: nowrap;\\n transition: background var(--shine-speed) ease;\\n}\\n\\n.shine-sweep-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n border-radius: inherit;\\n background-image: linear-gradient(\\n 45deg,\\n transparent 25%,\\n var(--shine-color) 50%,\\n transparent 75%,\\n transparent 100%\\n );\\n background-size: 250% 250%;\\n background-position: 200% 0;\\n background-repeat: no-repeat;\\n transition: background-position var(--shine-speed) ease;\\n}\\n\\n.shine-sweep-button:hover {\\n background: var(--button-hover-bg);\\n}\\n\\n.shine-sweep-button:hover::before {\\n background-position: -100% 0;\\n}\\n\\n.shine-sweep-button:focus-visible {\\n outline: 2px solid #2563eb;\\n outline-offset: 3px;\\n}\\n\\n.shine-button-text {\\n position: relative;\\n z-index: 1;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .shine-sweep-button,\\n .shine-sweep-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Shine Hover Button\\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":"0161f642-7b73-4ddf-b25c-7e2ce97f56ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"90141be1-a653-401a-b105-4a91126211cc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"1f641d8f-563b-4861-b3e2-516248cc1932","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c923d77d-d79f-4c70-b65f-d7910b38d5aa","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"f5545363-0f65-4859-a993-c9ca0ceeeb03","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --shine-speed: 1000ms;\\n --button-bg: #3b82f6;\\n --button-hover-bg: rgba(59, 130, 246, 0.8);\\n --button-text: #ffffff;\\n --shine-color: rgba(255, 255, 255, 0.7);\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.shine-button-preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.shine-sweep-button {\\n position: relative;\\n height: 40px;\\n padding: 8px 16px;\\n border: 0;\\n border-radius: 6px;\\n background: var(--button-bg);\\n color: var(--button-text);\\n overflow: hidden;\\n cursor: pointer;\\n font-size: 14px;\\n font-weight: 500;\\n white-space: nowrap;\\n transition: background var(--shine-speed) ease;\\n}\\n\\n.shine-sweep-button::before {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n border-radius: inherit;\\n background-image: linear-gradient(\\n 45deg,\\n transparent 25%,\\n var(--shine-color) 50%,\\n transparent 75%,\\n transparent 100%\\n );\\n background-size: 250% 250%;\\n background-position: 200% 0;\\n background-repeat: no-repeat;\\n transition: background-position var(--shine-speed) ease;\\n}\\n\\n.shine-sweep-button:hover {\\n background: var(--button-hover-bg);\\n}\\n\\n.shine-sweep-button:hover::before {\\n background-position: -100% 0;\\n}\\n\\n.shine-sweep-button:focus-visible {\\n outline: 2px solid #2563eb;\\n outline-offset: 3px;\\n}\\n\\n.shine-button-text {\\n position: relative;\\n z-index: 1;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .shine-sweep-button,\\n .shine-sweep-button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bca0f0b4-638d-4a9c-98b5-2debe7971cbc","type":"divider","props":{},"children":[]},{"id":"afcd2958-6bd1-4776-91b3-a5ec4af5a50e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"8a6acfac-3dcc-4240-92e5-640e7909f417","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"14278895-27ba-4563-8b3d-d0a6c41e4ed1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Name\nShine Hover Button","styles":{"bold":true}},{"type":"text","text":" because a diagonal light sweep moves across the button on hover.","styles":{}}],"children":[]},{"id":"b883b0df-1801-44f6-8109-3419383907b7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The button uses a blue background, white text, rounded corners, and an overflow-hidden area for the shine effect.","styles":{}}],"children":[]},{"id":"9ba7bb7d-3f63-4783-aa60-f801ae9f4da3","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 on the full page.","styles":{}}],"children":[]},{"id":"299ccbab-cd90-4a9e-8f55-85050c2fc0f0","type":"procode","props":{"code":".shine-button-preview {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"4hmyk5t6j\",\"name\":\"code\",\"code\":\".shine-button-preview {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"403e4d26-9935-4fd8-9cd0-ecbabfeb7cc5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover\n","styles":{"bold":true}},{"type":"text","text":"When hovered, the button background becomes slightly transparent and the shine moves across the button.","styles":{}}],"children":[]},{"id":"9b3c0c59-b1e4-4d0f-bba1-9a70597bda3e","type":"procode","props":{"code":".shine-sweep-button:hover::before {\n background-position: -100% 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s8dwhx3lc\",\"name\":\"code\",\"code\":\".shine-sweep-button:hover::before {\\n background-position: -100% 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5efdd88b-de1b-492a-8a76-53fe141cfdf4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active\n","styles":{"bold":true}},{"type":"text","text":"No active/click effect is used. The original component only uses hover.","styles":{}}],"children":[]},{"id":"7865c9c5-43f1-4e17-a315-b35cc8c3c4ee","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The animation uses a ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element with a diagonal ","styles":{}},{"type":"text","text":"linear-gradient","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a942bfe0-76d0-447d-b3e4-2a03c9a4cfad","type":"procode","props":{"code":".shine-sweep-button::before {\n background-size: 250% 250%;\n background-position: 200% 0;\n transition: background-position var(--shine-speed) ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"phnxpg5xx\",\"name\":\"code\",\"code\":\".shine-sweep-button::before {\\n background-size: 250% 250%;\\n background-position: 200% 0;\\n transition: background-position var(--shine-speed) ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d9dca69a-7aa4-4cb5-a8d0-c0c068214839","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shine Effect\n","styles":{"bold":true}},{"type":"text","text":"The diagonal shine is created here:","styles":{}}],"children":[]},{"id":"08d0781a-305e-4ad7-933f-c0f309818164","type":"procode","props":{"code":"background-image: linear-gradient(\n 45deg,\n transparent 25%,\n var(--shine-color) 50%,\n transparent 75%,\n transparent 100%\n);","language":"javascript","filename":"","files":"[{\"id\":\"neusg5wlz\",\"name\":\"code\",\"code\":\"background-image: linear-gradient(\\n 45deg,\\n transparent 25%,\\n var(--shine-color) 50%,\\n transparent 75%,\\n transparent 100%\\n);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8105e0ee-5c08-4b1a-a1e1-a18ec0bee047","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the shine speed here:","styles":{}}],"children":[]},{"id":"c33e2bbf-4362-49ac-932a-f3c70db03756","type":"procode","props":{"code":"--shine-speed: 1000ms;","language":"javascript","filename":"","files":"[{\"id\":\"9i07m6fve\",\"name\":\"code\",\"code\":\"--shine-speed: 1000ms;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73dc9dc7-ba4f-4b2f-88e6-6de4c2222eda","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Lower ","styles":{}},{"type":"text","text":"1000ms","styles":{"code":true}},{"type":"text","text":" to make it faster.\n\nIncrease ","styles":{}},{"type":"text","text":"1000ms","styles":{"code":true}},{"type":"text","text":" to make it smoother.","styles":{}}],"children":[]},{"id":"470fcaf9-5b96-4338-b994-cf00e2df7fe4","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":"63cf8b7c-3930-4433-a2f9-e12c173d7310","type":"procode","props":{"code":"--button-bg: #3b82f6;\n--button-hover-bg: rgba(59, 130, 246, 0.8);","language":"javascript","filename":"","files":"[{\"id\":\"ee5zz5a1n\",\"name\":\"code\",\"code\":\"--button-bg: #3b82f6;\\n--button-hover-bg: rgba(59, 130, 246, 0.8);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"381fcb2b-918c-4d7e-be3f-83311a18fa6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the shine color here:","styles":{}}],"children":[]},{"id":"19fb4f3c-acec-4e72-8d16-c1f7435f0011","type":"procode","props":{"code":"--shine-color: rgba(255, 255, 255, 0.7);","language":"javascript","filename":"","files":"[{\"id\":\"jsw1fa1wt\",\"name\":\"code\",\"code\":\"--shine-color: rgba(255, 255, 255, 0.7);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"66c026f8-4de4-4d87-b9ca-76c067c5eaf8","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":"b8ffce69-db7b-43fd-be5b-b4588c1b8e3f","type":"procode","props":{"code":"Shine Hover","language":"javascript","filename":"","files":"[{\"id\":\"e46jr4157\",\"name\":\"code\",\"code\":\"Shine Hover\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d732b939-8edc-4bdb-84d7-765330b51dc7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"No JavaScript is needed. The effect is handled with HTML + CSS.","styles":{}}],"children":[]},{"id":"7aecef40-4d96-4ba7-8f64-0e42aa149761","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]