Elegant Ripple Button

[{"id":"c11765b5-bda2-4a3e-911e-66d29cdc9782","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2caab649-2e4e-4ec5-9abf-6c3dd9009ff3","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #000;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.ripple-button {\\n padding: 15px 30px;\\n border: 2px solid #2c2c2c;\\n background-color: #1a1a1a;\\n color: #ffffff;\\n font-size: 1.2rem;\\n cursor: pointer;\\n border-radius: 30px;\\n transition: all 0.4s ease;\\n outline: none;\\n position: relative;\\n overflow: hidden;\\n font-weight: bold;\\n}\\n\\n.ripple-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n height: 100%;\\n background: radial-gradient(\\n circle,\\n rgba(255, 255, 255, 0.25) 0%,\\n rgba(255, 255, 255, 0) 70%\\n );\\n transform: scale(0);\\n transition: transform 0.5s ease;\\n}\\n\\n.ripple-button:hover::after {\\n transform: scale(4);\\n}\\n\\n.ripple-button:hover {\\n border-color: #666666;\\n background: #292929;\\n}\\n\\n.ripple-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .ripple-button,\\n .ripple-button::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Elegant Ripple Button\\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","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"4cc5f3a4-4b28-4e3c-991c-83453775d337","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b2bea823-352f-4b50-b2ed-78065dff122d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"c95e7a96-4bae-4d09-aeda-ea0f4073d3d0","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de5fddf0-57a4-4478-81b6-2afbbde4acea","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"0394b3ef-5831-4fed-b5cd-7572b78bd295","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n min-height: 100vh;\\n margin: 0;\\n display: grid;\\n place-items: center;\\n background: #000;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.ripple-button {\\n padding: 15px 30px;\\n border: 2px solid #2c2c2c;\\n background-color: #1a1a1a;\\n color: #ffffff;\\n font-size: 1.2rem;\\n cursor: pointer;\\n border-radius: 30px;\\n transition: all 0.4s ease;\\n outline: none;\\n position: relative;\\n overflow: hidden;\\n font-weight: bold;\\n}\\n\\n.ripple-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n height: 100%;\\n background: radial-gradient(\\n circle,\\n rgba(255, 255, 255, 0.25) 0%,\\n rgba(255, 255, 255, 0) 70%\\n );\\n transform: scale(0);\\n transition: transform 0.5s ease;\\n}\\n\\n.ripple-button:hover::after {\\n transform: scale(4);\\n}\\n\\n.ripple-button:hover {\\n border-color: #666666;\\n background: #292929;\\n}\\n\\n.ripple-button:active {\\n transform: scale(0.96);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .ripple-button,\\n .ripple-button::after {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"22293ed0-b643-4ecb-bd60-a61e4ae70188","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6e39cd91-9c8e-4041-b0db-c6433c78df8e","type":"divider","props":{},"children":[]},{"id":"dc525c0c-e0b1-4c26-a147-7fdc2659f374","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"7ee136c1-ad5f-4805-bb02-81bd388771b5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The original class name is changed from:","styles":{}}],"children":[]},{"id":"8e5086b7-66b7-4d0f-a501-5c9aadd688c8","type":"procode","props":{"code":"boton-elegante -> ripple-button","language":"javascript","filename":"","files":"[{\"id\":\"mdqkfn77i\",\"name\":\"code\",\"code\":\"boton-elegante -> ripple-button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4ac89fdb-6b82-4637-8357-ad76ee219333","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow\n\nThe button only needs one element.","styles":{}}],"children":[]},{"id":"a71ed8e6-19bd-45df-ac74-5a40a3516de3","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"0cryng03s\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"66866000-d6b7-4c43-ace6-e5287a14c507","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Style\n\n","styles":{}},{"type":"text","text":".ripple-button","styles":{"code":true}},{"type":"text","text":" creates the main dark rounded button.","styles":{}}],"children":[]},{"id":"d61acf79-d757-4feb-bfe3-6d93fa94a4f5","type":"procode","props":{"code":".ripple-button {\n padding: 15px 30px;\n background-color: #1a1a1a;\n color: #ffffff;\n border-radius: 30px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"65bolt9ao\",\"name\":\"code\",\"code\":\".ripple-button {\\n padding: 15px 30px;\\n background-color: #1a1a1a;\\n color: #ffffff;\\n border-radius: 30px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e5d54f49-59b6-4b54-bab4-f3dc3c5955cc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Ripple Layer\n\nThe ripple effect is created using ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8dbe6a96-ed69-4991-ae79-a4a6669004a2","type":"procode","props":{"code":".ripple-button::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.25) 0%,\n rgba(255, 255, 255, 0) 70%\n );\n}","language":"javascript","filename":"","files":"[{\"id\":\"uao0i5t2e\",\"name\":\"code\",\"code\":\".ripple-button::after {\\n content: \\\"\\\";\\n position: absolute;\\n inset: 0;\\n background: radial-gradient(\\n circle,\\n rgba(255, 255, 255, 0.25) 0%,\\n rgba(255, 255, 255, 0) 70%\\n );\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fffe3df5-b333-4fbe-aaf8-fe84c6d43fa0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default Ripple State\n\nThe ripple starts hidden with:","styles":{}}],"children":[]},{"id":"784d5e74-d551-4b7a-84b8-6bdedafa777b","type":"procode","props":{"code":"transform: scale(0);","language":"javascript","filename":"","files":"[{\"id\":\"z4y3had6u\",\"name\":\"code\",\"code\":\"transform: scale(0);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2e468c3c-f29b-4c8b-8ce4-9a2c54da2087","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Flow\n\nWhen the button is hovered, the ripple expands.","styles":{}}],"children":[]},{"id":"e14d4f63-c02c-47be-b05d-c4ce88dae7ee","type":"procode","props":{"code":".ripple-button:hover::after {\n transform: scale(4);\n}","language":"javascript","filename":"","files":"[{\"id\":\"wqft7e2nf\",\"name\":\"code\",\"code\":\".ripple-button:hover::after {\\n transform: scale(4);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7ff57ab1-60ea-4099-a1ff-7e30e85441de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button background also becomes slightly lighter.","styles":{}}],"children":[]},{"id":"c14bf4ab-6e59-47d2-8832-184ef2beabea","type":"procode","props":{"code":".ripple-button:hover {\n border-color: #666666;\n background: #292929;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rrr6z6d2l\",\"name\":\"code\",\"code\":\".ripple-button:hover {\\n border-color: #666666;\\n background: #292929;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d3654f59-aef2-421f-ba74-f72fe4444df1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow\n\nWhen clicked, the button scales down slightly.","styles":{}}],"children":[]},{"id":"c055d164-824b-4d23-809a-344de4a543b5","type":"procode","props":{"code":".ripple-button:active {\n transform: scale(0.96);\n}","language":"javascript","filename":"","files":"[{\"id\":\"l8goh55l9\",\"name\":\"code\",\"code\":\".ripple-button:active {\\n transform: scale(0.96);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db37ceaf-192d-476c-80c9-c38a6538245a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]