Shine Pill Button

[{"id":"e6cae6ab-f4a2-45e0-a4f8-8a9e09e886c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5af04b55-852a-465c-ba2a-4ae7b506097d","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: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.shine-pill-button {\\n position: relative;\\n margin: 0;\\n padding: 17px 38px;\\n outline: none;\\n border: 1px solid rgba(22, 76, 167, 0.6);\\n border-radius: 999px;\\n background-color: #ffffff;\\n color: #1d89ff;\\n overflow: hidden;\\n cursor: pointer;\\n text-decoration: none;\\n text-transform: uppercase;\\n font-family: inherit;\\n font-weight: 400;\\n z-index: 0;\\n transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);\\n}\\n\\n.shine-pill-button span {\\n position: relative;\\n z-index: 2;\\n color: #164ca7;\\n font-size: 14px;\\n font-weight: 500;\\n letter-spacing: 0.7px;\\n}\\n\\n.shine-pill-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: -50px;\\n left: -75px;\\n width: 50px;\\n height: 155px;\\n background: #38ef7d;\\n opacity: 0.4;\\n transform: rotate(35deg);\\n z-index: 1;\\n transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);\\n}\\n\\n.shine-pill-button:hover {\\n border-color: rgba(22, 76, 167, 0.75);\\n box-shadow:\\n 0 0 1px rgba(24, 94, 224, 0.2),\\n 0 6px 16px rgba(24, 94, 224, 0.18);\\n animation: buttonRotate 0.7s ease-in-out both;\\n}\\n\\n.shine-pill-button:hover span {\\n animation: textStorm 0.7s ease-in-out both;\\n animation-delay: 0.06s;\\n}\\n\\n.shine-pill-button:hover::after {\\n left: 120%;\\n}\\n\\n.shine-pill-button:active {\\n scale: 0.97;\\n}\\n\\n@keyframes buttonRotate {\\n 0% {\\n transform: rotate(0deg) translate3d(0, 0, 0);\\n }\\n\\n 25% {\\n transform: rotate(3deg) translate3d(0, 0, 0);\\n }\\n\\n 50% {\\n transform: rotate(-3deg) translate3d(0, 0, 0);\\n }\\n\\n 75% {\\n transform: rotate(1deg) translate3d(0, 0, 0);\\n }\\n\\n 100% {\\n transform: rotate(0deg) translate3d(0, 0, 0);\\n }\\n}\\n\\n@keyframes textStorm {\\n 0% {\\n transform: translate3d(0, 0, 0) translateZ(0);\\n }\\n\\n 25% {\\n transform: translate3d(4px, 0, 0) translateZ(0);\\n }\\n\\n 50% {\\n transform: translate3d(-3px, 0, 0) translateZ(0);\\n }\\n\\n 75% {\\n transform: translate3d(2px, 0, 0) translateZ(0);\\n }\\n\\n 100% {\\n transform: translate3d(0, 0, 0) translateZ(0);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .shine-pill-button,\\n .shine-pill-button span,\\n .shine-pill-button::after {\\n animation: none;\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Shine Pill 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":"4b1146b5-1813-4091-a7f0-9d374ff04c4e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"c3d2e5a1-c1e8-44e3-86e5-be273f5a87f7","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7a37453d-8e29-42c9-ae44-3e494bab72bb","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"20210b4a-c708-40f0-91a1-7f4c3cdc4012","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: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.shine-pill-button {\\n position: relative;\\n margin: 0;\\n padding: 17px 38px;\\n outline: none;\\n border: 1px solid rgba(22, 76, 167, 0.6);\\n border-radius: 999px;\\n background-color: #ffffff;\\n color: #1d89ff;\\n overflow: hidden;\\n cursor: pointer;\\n text-decoration: none;\\n text-transform: uppercase;\\n font-family: inherit;\\n font-weight: 400;\\n z-index: 0;\\n transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);\\n}\\n\\n.shine-pill-button span {\\n position: relative;\\n z-index: 2;\\n color: #164ca7;\\n font-size: 14px;\\n font-weight: 500;\\n letter-spacing: 0.7px;\\n}\\n\\n.shine-pill-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: -50px;\\n left: -75px;\\n width: 50px;\\n height: 155px;\\n background: #38ef7d;\\n opacity: 0.4;\\n transform: rotate(35deg);\\n z-index: 1;\\n transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);\\n}\\n\\n.shine-pill-button:hover {\\n border-color: rgba(22, 76, 167, 0.75);\\n box-shadow:\\n 0 0 1px rgba(24, 94, 224, 0.2),\\n 0 6px 16px rgba(24, 94, 224, 0.18);\\n animation: buttonRotate 0.7s ease-in-out both;\\n}\\n\\n.shine-pill-button:hover span {\\n animation: textStorm 0.7s ease-in-out both;\\n animation-delay: 0.06s;\\n}\\n\\n.shine-pill-button:hover::after {\\n left: 120%;\\n}\\n\\n.shine-pill-button:active {\\n scale: 0.97;\\n}\\n\\n@keyframes buttonRotate {\\n 0% {\\n transform: rotate(0deg) translate3d(0, 0, 0);\\n }\\n\\n 25% {\\n transform: rotate(3deg) translate3d(0, 0, 0);\\n }\\n\\n 50% {\\n transform: rotate(-3deg) translate3d(0, 0, 0);\\n }\\n\\n 75% {\\n transform: rotate(1deg) translate3d(0, 0, 0);\\n }\\n\\n 100% {\\n transform: rotate(0deg) translate3d(0, 0, 0);\\n }\\n}\\n\\n@keyframes textStorm {\\n 0% {\\n transform: translate3d(0, 0, 0) translateZ(0);\\n }\\n\\n 25% {\\n transform: translate3d(4px, 0, 0) translateZ(0);\\n }\\n\\n 50% {\\n transform: translate3d(-3px, 0, 0) translateZ(0);\\n }\\n\\n 75% {\\n transform: translate3d(2px, 0, 0) translateZ(0);\\n }\\n\\n 100% {\\n transform: translate3d(0, 0, 0) translateZ(0);\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .shine-pill-button,\\n .shine-pill-button span,\\n .shine-pill-button::after {\\n animation: none;\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86fa6072-5dd0-438c-ba3d-f3ac60abc260","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"99e6df0b-26cb-43ec-a1b3-d308c58386a3","type":"divider","props":{},"children":[]},{"id":"5c424537-089b-47c5-8a71-0155d3259479","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"369daeef-62b3-4cea-ada7-83d145900143","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button is created with one ","styles":{}},{"type":"text","text":"","language":"javascript","filename":"","files":"[{\"id\":\"drjhh4eke\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"62796880-c0dd-4215-90d5-4a9fb6861682","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"","styles":{"code":true}},{"type":"text","text":" is used so the text can have its own animation on hover.","styles":{}}],"children":[]},{"id":"063702e3-4c34-4c6d-8358-e2009d298c8a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center\n\nThe ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper centers the button in the screen.","styles":{}}],"children":[]},{"id":"f6012de3-bda9-4e7f-bf08-ff7c5ce00bc2","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"chg8j46l8\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5619227a-51cd-411c-8ac5-6e0a314b148d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Body Setup\n\nThe body removes default margin and uses a white background.","styles":{}}],"children":[]},{"id":"a8a25069-92bf-4666-9389-2fb24299c0e9","type":"procode","props":{"code":"body {\n margin: 0;\n min-height: 100vh;\n background: #fff;\n font-family: Arial, Helvetica, sans-serif;\n}","language":"javascript","filename":"","files":"[{\"id\":\"omftyuvrv\",\"name\":\"code\",\"code\":\"body {\\n margin: 0;\\n min-height: 100vh;\\n background: #fff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6948bcb5-06a9-442b-a224-de8264de42e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base\n\nThe button uses a white background, blue border, and blue text color.","styles":{}}],"children":[]},{"id":"d1c52f16-197a-493e-a983-a97f38a90188","type":"procode","props":{"code":".shine-pill-button {\n border: 1px solid rgba(22, 76, 167, 0.6);\n background-color: #ffffff;\n color: #1d89ff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"1aciv9aec\",\"name\":\"code\",\"code\":\".shine-pill-button {\\n border: 1px solid rgba(22, 76, 167, 0.6);\\n background-color: #ffffff;\\n color: #1d89ff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"04bbf038-d67a-4b4c-a58a-777ede912c1a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Pill Shape\n\nThe button is made into a pill using a large border radius.","styles":{}}],"children":[]},{"id":"9e637912-5225-4c2f-8b19-db66cea08358","type":"procode","props":{"code":".shine-pill-button {\n border-radius: 999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dnk0uknis\",\"name\":\"code\",\"code\":\".shine-pill-button {\\n border-radius: 999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"29a6ccf1-e8a1-4576-b85a-202ad51c5a1b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Size\n\nThe button size comes from the padding.","styles":{}}],"children":[]},{"id":"3db4b998-055c-4519-b184-44ffac19e815","type":"procode","props":{"code":".shine-pill-button {\n padding: 17px 38px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"xakwg1a3n\",\"name\":\"code\",\"code\":\".shine-pill-button {\\n padding: 17px 38px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"09cd3030-9e1c-4416-b41d-7caaef88b21e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Layer\n\nThe button text is placed above the shine layer using ","styles":{}},{"type":"text","text":"z-index: 2","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"da091076-737e-4080-b6f7-465fc69f8f5e","type":"procode","props":{"code":".shine-pill-button span {\n position: relative;\n z-index: 2;\n color: #164ca7;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.7px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9080gzrgi\",\"name\":\"code\",\"code\":\".shine-pill-button span {\\n position: relative;\\n z-index: 2;\\n color: #164ca7;\\n font-size: 14px;\\n font-weight: 500;\\n letter-spacing: 0.7px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3dc79afa-05c0-4127-a40c-0503f50175a4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Overflow Clip\n\nThe button uses ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":" so the shine effect stays inside the pill shape.","styles":{}}],"children":[]},{"id":"0320cc05-1107-41ac-b9bf-2413d33e3066","type":"procode","props":{"code":".shine-pill-button {\n overflow: hidden;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lvjv4g6rm\",\"name\":\"code\",\"code\":\".shine-pill-button {\\n overflow: hidden;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"547ab0ed-08b2-4703-9fc9-eb34f0214f34","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shine Layer\n\nThe shine effect is created with the ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" pseudo-element.","styles":{}}],"children":[]},{"id":"33ab9671-ea67-4b8f-a5d1-e0adc78ffe30","type":"procode","props":{"code":".shine-pill-button::after {\n content: \"\";\n position: absolute;\n top: -50px;\n left: -75px;\n width: 50px;\n height: 155px;\n background: #38ef7d;\n opacity: 0.4;\n transform: rotate(35deg);\n z-index: 1;\n}","language":"javascript","filename":"","files":"[{\"id\":\"47kmcituf\",\"name\":\"code\",\"code\":\".shine-pill-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: -50px;\\n left: -75px;\\n width: 50px;\\n height: 155px;\\n background: #38ef7d;\\n opacity: 0.4;\\n transform: rotate(35deg);\\n z-index: 1;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e571baf4-a9b1-446b-bd26-89bab6b2a056","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The shine layer starts outside the left side of the button.","styles":{}}],"children":[]},{"id":"0bed38bf-a077-48cc-8088-fee07d54cc10","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Shine Movement\n\nOn hover, the shine layer moves across the button to the right side.","styles":{}}],"children":[]},{"id":"e97738e6-becf-4b70-88bf-a764d773d946","type":"procode","props":{"code":".shine-pill-button:hover::after {\n left: 120%;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ceejvao5x\",\"name\":\"code\",\"code\":\".shine-pill-button:hover::after {\\n left: 120%;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"02294c08-32e2-429a-bb29-12cfa439270b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This creates the green light sweep effect.","styles":{}}],"children":[]},{"id":"a624aaf3-76fc-466c-8ac5-c9eb41d310d1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Button Effect\n\nWhen the button is hovered, it gets a soft blue shadow and runs the rotate animation.","styles":{}}],"children":[]},{"id":"6d56aa2c-40ae-4e5f-b88d-2474802c2458","type":"procode","props":{"code":".shine-pill-button:hover {\n border-color: rgba(22, 76, 167, 0.75);\n box-shadow:\n 0 0 1px rgba(24, 94, 224, 0.2),\n 0 6px 16px rgba(24, 94, 224, 0.18);\n animation: buttonRotate 0.7s ease-in-out both;\n}","language":"javascript","filename":"","files":"[{\"id\":\"enrkl9lid\",\"name\":\"code\",\"code\":\".shine-pill-button:hover {\\n border-color: rgba(22, 76, 167, 0.75);\\n box-shadow:\\n 0 0 1px rgba(24, 94, 224, 0.2),\\n 0 6px 16px rgba(24, 94, 224, 0.18);\\n animation: buttonRotate 0.7s ease-in-out both;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"58991b1d-2687-4aab-bc95-4eba4852801b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Rotate Animation\n\nThe button rotates slightly left and right, then returns to normal.","styles":{}}],"children":[]},{"id":"f550ab88-1ead-4f86-b590-813c9e5d389b","type":"procode","props":{"code":"@keyframes buttonRotate {\n 0% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(3deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(-3deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(1deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"oxua8jma6\",\"name\":\"code\",\"code\":\"@keyframes buttonRotate {\\n 0% {\\n transform: rotate(0deg) translate3d(0, 0, 0);\\n }\\n\\n 25% {\\n transform: rotate(3deg) translate3d(0, 0, 0);\\n }\\n\\n 50% {\\n transform: rotate(-3deg) translate3d(0, 0, 0);\\n }\\n\\n 75% {\\n transform: rotate(1deg) translate3d(0, 0, 0);\\n }\\n\\n 100% {\\n transform: rotate(0deg) translate3d(0, 0, 0);\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c48e38f4-a9ee-4c0c-bbae-94a5412ab734","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Hover Animation\n\nThe text also moves left and right after the button starts shaking.","styles":{}}],"children":[]},{"id":"f1bde926-3a7f-411d-9220-bd37fb2e1e60","type":"procode","props":{"code":".shine-pill-button:hover span {\n animation: textStorm 0.7s ease-in-out both;\n animation-delay: 0.06s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"nf2u2cfww\",\"name\":\"code\",\"code\":\".shine-pill-button:hover span {\\n animation: textStorm 0.7s ease-in-out both;\\n animation-delay: 0.06s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6a6537f8-397c-4a94-9e5c-6a1572a8db9e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Storm Keyframes\n\nThe text moves horizontally to create a small storm/shake effect.","styles":{}}],"children":[]},{"id":"4aedf321-1d7f-4418-84c1-c84e7277c176","type":"procode","props":{"code":"@keyframes textStorm {\n 0% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n\n 25% {\n transform: translate3d(4px, 0, 0) translateZ(0);\n }\n\n 50% {\n transform: translate3d(-3px, 0, 0) translateZ(0);\n }\n\n 75% {\n transform: translate3d(2px, 0, 0) translateZ(0);\n }\n\n 100% {\n transform: translate3d(0, 0, 0) translateZ(0);\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"i8388rf23\",\"name\":\"code\",\"code\":\"@keyframes textStorm {\\n 0% {\\n transform: translate3d(0, 0, 0) translateZ(0);\\n }\\n\\n 25% {\\n transform: translate3d(4px, 0, 0) translateZ(0);\\n }\\n\\n 50% {\\n transform: translate3d(-3px, 0, 0) translateZ(0);\\n }\\n\\n 75% {\\n transform: translate3d(2px, 0, 0) translateZ(0);\\n }\\n\\n 100% {\\n transform: translate3d(0, 0, 0) translateZ(0);\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"14235c37-af25-49c2-97b5-6638b2582472","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Click Effect\n\nWhen the button is clicked, it becomes slightly smaller.","styles":{}}],"children":[]},{"id":"1ad09159-ed2a-45fa-9a3d-d817d7168110","type":"procode","props":{"code":".shine-pill-button:active {\n scale: 0.97;\n}","language":"javascript","filename":"","files":"[{\"id\":\"cmd3lcq50\",\"name\":\"code\",\"code\":\".shine-pill-button:active {\\n scale: 0.97;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d03ff2bd-5db6-48eb-8f1b-c26c2e64e87f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n\nThe JavaScript file only logs a test message.","styles":{}}],"children":[]},{"id":"442cb589-0e2b-44fc-bc8f-a355bdd6bcba","type":"procode","props":{"code":"console.log(\"Hello Vanilla!\");","language":"javascript","filename":"","files":"[{\"id\":\"3bfgzsgqd\",\"name\":\"code\",\"code\":\"console.log(\\\"Hello Vanilla!\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"25f9890a-f049-448a-9004-c351abbbcbf2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button animation does not need JavaScript because all interactions are handled with CSS.","styles":{}}],"children":[]},{"id":"b45a4f12-b058-4981-9739-cee6222d767a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow\n\nDefault: white pill button with blue border and blue text.\n\nHover: green shine moves from left to right.\n\nHover: button rotates slightly.\n\nHover: text shakes left and right.\n\nActive: button scales down slightly.","styles":{}}],"children":[]},{"id":"5c6e27d5-d2a1-4cee-9322-b96c752e77ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Motion Safety\n\nThe reduced motion media query disables animation and transition.","styles":{}}],"children":[]},{"id":"3e5abffb-e984-40d6-adef-3990590d9372","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .shine-pill-button,\n .shine-pill-button span,\n .shine-pill-button::after {\n animation: none;\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"8qi8austf\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .shine-pill-button,\\n .shine-pill-button span,\\n .shine-pill-button::after {\\n animation: none;\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75fa57e7-8213-4718-bbe6-30805c38c3e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]