Bubble Pill Button

[{"id":"546bb164-b691-4ff7-893f-e011c0b3f4c7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4bedc12c-1f7b-48c3-b054-147bb9b29c21","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #000000;\\n --button-hover-bg: #111111;\\n --button-text: #ffffff;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--page-bg);\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.bubble-pill-button {\\n position: relative;\\n padding: 12px 34px;\\n border: none;\\n border-radius: 999px;\\n color: var(--button-text);\\n cursor: pointer;\\n background-color: var(--button-bg);\\n font-size: 16px;\\n font-weight: 600;\\n line-height: 1;\\n transition:\\n transform 0.2s ease,\\n background-color 0.2s ease;\\n}\\n\\n.bubble-pill-button:hover {\\n background-color: var(--button-hover-bg);\\n}\\n\\n.bubble-pill-button:active {\\n transform: scale(0.96);\\n}\\n\\n.bubble-pill-button::before,\\n.bubble-pill-button::after {\\n position: absolute;\\n content: \\\"\\\";\\n width: 150%;\\n left: 50%;\\n height: 100%;\\n transform: translateX(-50%);\\n z-index: -1;\\n background-repeat: no-repeat;\\n pointer-events: none;\\n}\\n\\n.bubble-pill-button:hover::before {\\n top: -70%;\\n background-image:\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(\\n circle,\\n transparent 20%,\\n var(--button-bg) 20%,\\n transparent 30%\\n ),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(\\n circle,\\n transparent 10%,\\n var(--button-bg) 15%,\\n transparent 20%\\n ),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%);\\n background-size:\\n 10% 10%,\\n 20% 20%,\\n 15% 15%,\\n 20% 20%,\\n 18% 18%,\\n 10% 10%,\\n 15% 15%,\\n 10% 10%,\\n 18% 18%;\\n background-position: 50% 120%;\\n animation: topBubbles 0.6s ease;\\n}\\n\\n@keyframes topBubbles {\\n 0% {\\n background-position:\\n 5% 90%,\\n 10% 90%,\\n 10% 90%,\\n 15% 90%,\\n 25% 90%,\\n 25% 90%,\\n 40% 90%,\\n 55% 90%,\\n 70% 90%;\\n }\\n\\n 50% {\\n background-position:\\n 0% 80%,\\n 0% 20%,\\n 10% 40%,\\n 20% 0%,\\n 30% 30%,\\n 22% 50%,\\n 50% 50%,\\n 65% 20%,\\n 90% 30%;\\n }\\n\\n 100% {\\n background-position:\\n 0% 70%,\\n 0% 10%,\\n 10% 30%,\\n 20% -10%,\\n 30% 20%,\\n 22% 40%,\\n 50% 40%,\\n 65% 10%,\\n 90% 20%;\\n background-size:\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%;\\n }\\n}\\n\\n.bubble-pill-button:hover::after {\\n bottom: -70%;\\n background-image:\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(\\n circle,\\n transparent 10%,\\n var(--button-bg) 15%,\\n transparent 20%\\n ),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%);\\n background-size:\\n 15% 15%,\\n 20% 20%,\\n 18% 18%,\\n 20% 20%,\\n 15% 15%,\\n 20% 20%,\\n 18% 18%;\\n background-position: 50% 0%;\\n animation: bottomBubbles 0.6s ease;\\n}\\n\\n@keyframes bottomBubbles {\\n 0% {\\n background-position:\\n 10% -10%,\\n 30% 10%,\\n 55% -10%,\\n 70% -10%,\\n 85% -10%,\\n 70% -10%,\\n 70% 0%;\\n }\\n\\n 50% {\\n background-position:\\n 0% 80%,\\n 20% 80%,\\n 45% 60%,\\n 60% 100%,\\n 75% 70%,\\n 95% 60%,\\n 105% 0%;\\n }\\n\\n 100% {\\n background-position:\\n 0% 90%,\\n 20% 90%,\\n 45% 70%,\\n 60% 110%,\\n 75% 80%,\\n 95% 70%,\\n 110% 10%;\\n background-size:\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .bubble-pill-button,\\n .bubble-pill-button::before,\\n .bubble-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 Bubble 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":"3455ae53-b54a-4294-949b-424618979c42","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3280b32e-8255-45c1-9f54-3e88cf525c8f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"fa52381b-10d2-4817-96a8-ebc0664603ed","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f910429-53e8-4c08-9558-c26d788b5177","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"8c6573e6-ab75-450f-8226-d56a75286375","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\":root {\\n --page-bg: #ffffff;\\n --button-bg: #000000;\\n --button-hover-bg: #111111;\\n --button-text: #ffffff;\\n}\\n\\n* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: Arial, Helvetica, sans-serif;\\n background: var(--page-bg);\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.bubble-pill-button {\\n position: relative;\\n padding: 12px 34px;\\n border: none;\\n border-radius: 999px;\\n color: var(--button-text);\\n cursor: pointer;\\n background-color: var(--button-bg);\\n font-size: 16px;\\n font-weight: 600;\\n line-height: 1;\\n transition:\\n transform 0.2s ease,\\n background-color 0.2s ease;\\n}\\n\\n.bubble-pill-button:hover {\\n background-color: var(--button-hover-bg);\\n}\\n\\n.bubble-pill-button:active {\\n transform: scale(0.96);\\n}\\n\\n.bubble-pill-button::before,\\n.bubble-pill-button::after {\\n position: absolute;\\n content: \\\"\\\";\\n width: 150%;\\n left: 50%;\\n height: 100%;\\n transform: translateX(-50%);\\n z-index: -1;\\n background-repeat: no-repeat;\\n pointer-events: none;\\n}\\n\\n.bubble-pill-button:hover::before {\\n top: -70%;\\n background-image:\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(\\n circle,\\n transparent 20%,\\n var(--button-bg) 20%,\\n transparent 30%\\n ),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(\\n circle,\\n transparent 10%,\\n var(--button-bg) 15%,\\n transparent 20%\\n ),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%);\\n background-size:\\n 10% 10%,\\n 20% 20%,\\n 15% 15%,\\n 20% 20%,\\n 18% 18%,\\n 10% 10%,\\n 15% 15%,\\n 10% 10%,\\n 18% 18%;\\n background-position: 50% 120%;\\n animation: topBubbles 0.6s ease;\\n}\\n\\n@keyframes topBubbles {\\n 0% {\\n background-position:\\n 5% 90%,\\n 10% 90%,\\n 10% 90%,\\n 15% 90%,\\n 25% 90%,\\n 25% 90%,\\n 40% 90%,\\n 55% 90%,\\n 70% 90%;\\n }\\n\\n 50% {\\n background-position:\\n 0% 80%,\\n 0% 20%,\\n 10% 40%,\\n 20% 0%,\\n 30% 30%,\\n 22% 50%,\\n 50% 50%,\\n 65% 20%,\\n 90% 30%;\\n }\\n\\n 100% {\\n background-position:\\n 0% 70%,\\n 0% 10%,\\n 10% 30%,\\n 20% -10%,\\n 30% 20%,\\n 22% 40%,\\n 50% 40%,\\n 65% 10%,\\n 90% 20%;\\n background-size:\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%;\\n }\\n}\\n\\n.bubble-pill-button:hover::after {\\n bottom: -70%;\\n background-image:\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(\\n circle,\\n transparent 10%,\\n var(--button-bg) 15%,\\n transparent 20%\\n ),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%),\\n radial-gradient(circle, var(--button-bg) 20%, transparent 20%);\\n background-size:\\n 15% 15%,\\n 20% 20%,\\n 18% 18%,\\n 20% 20%,\\n 15% 15%,\\n 20% 20%,\\n 18% 18%;\\n background-position: 50% 0%;\\n animation: bottomBubbles 0.6s ease;\\n}\\n\\n@keyframes bottomBubbles {\\n 0% {\\n background-position:\\n 10% -10%,\\n 30% 10%,\\n 55% -10%,\\n 70% -10%,\\n 85% -10%,\\n 70% -10%,\\n 70% 0%;\\n }\\n\\n 50% {\\n background-position:\\n 0% 80%,\\n 20% 80%,\\n 45% 60%,\\n 60% 100%,\\n 75% 70%,\\n 95% 60%,\\n 105% 0%;\\n }\\n\\n 100% {\\n background-position:\\n 0% 90%,\\n 20% 90%,\\n 45% 70%,\\n 60% 110%,\\n 75% 80%,\\n 95% 70%,\\n 110% 10%;\\n background-size:\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%,\\n 0% 0%;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .bubble-pill-button,\\n .bubble-pill-button::before,\\n .bubble-pill-button::after {\\n animation: none;\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c8aca7dc-7c70-4005-aa31-b88fb7ae64dc","type":"divider","props":{},"children":[]},{"id":"26ae258d-bc99-4852-b902-3dae32b2f365","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"067eee33-2651-4388-bb43-1eb0357b6a49","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is a static black pill button with a bubble burst hover animation. The button itself uses only HTML and CSS. JavaScript is not needed because the animation is handled fully by CSS pseudo-elements and keyframes.","styles":{}}],"children":[]},{"id":"c3a14025-eebf-4f52-941a-6c4bacb05c2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure\n\nThe ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":" file creates one centered button inside ","styles":{}},{"type":"text","text":"

","styles":{"code":true}},{"type":"text","text":". The button uses the class ","styles":{}},{"type":"text","text":".bubble-pill-button","styles":{"code":true}},{"type":"text","text":", which is the main styling and animation target.","styles":{}}],"children":[]},{"id":"3e109df6-4dac-4306-817c-386e0faf9398","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 uses ","styles":{}},{"type":"text","text":"min-height: 100vh","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"display: grid","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"place-items: center","styles":{"code":true}},{"type":"text","text":". This makes the button stay exactly in the center of the viewport.","styles":{}}],"children":[]},{"id":"e2192ee4-8dec-4cac-994e-c9750fcec08d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Shape\n\nThe button becomes a basic pill using:","styles":{}}],"children":[]},{"id":"c5d76b37-b4ab-4164-a8c4-e2465b28b89d","type":"procode","props":{"code":"border-radius: 999px;\npadding: 12px 34px;","language":"javascript","filename":"","files":"[{\"id\":\"qpccad8zq\",\"name\":\"code\",\"code\":\"border-radius: 999px;\\npadding: 12px 34px;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1f4b0dc8-c818-4ffb-87ac-11d89b075859","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The background is black, the text is white, and there is no border.","styles":{}}],"children":[]},{"id":"0d82c152-9701-4bbd-a797-f211c131b91d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover State\n\nOn hover, the button background changes slightly from pure black to ","styles":{}},{"type":"text","text":"#111111","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"00ce9d2e-496b-407b-8216-a31606062e91","type":"procode","props":{"code":".bubble-pill-button:hover {\n background-color: var(--button-hover-bg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"utddhwpim\",\"name\":\"code\",\"code\":\".bubble-pill-button:hover {\\n background-color: var(--button-hover-bg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cb9ad737-fa12-42c8-89cd-a92e16d58685","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active State\n\nWhen clicked, the button scales down slightly to create a pressed feeling.","styles":{}}],"children":[]},{"id":"2315eef0-4029-4ee9-a7c4-0e8cc6a5b83a","type":"procode","props":{"code":".bubble-pill-button:active {\n transform: scale(0.96);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ky18rzn6j\",\"name\":\"code\",\"code\":\".bubble-pill-button:active {\\n transform: scale(0.96);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"02450db0-909b-4cf2-b138-753093960a60","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bubble Effect\n\nThe bubbles are not real HTML elements. They are created with ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"70a30011-73fa-4a98-bc82-688f9b988041","type":"procode","props":{"code":".bubble-pill-button::before,\n.bubble-pill-button::after {\n position: absolute;\n content: \"\";\n}","language":"javascript","filename":"","files":"[{\"id\":\"78fj6poo3\",\"name\":\"code\",\"code\":\".bubble-pill-button::before,\\n.bubble-pill-button::after {\\n position: absolute;\\n content: \\\"\\\";\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca591a36-6af4-4d1c-8f88-d2425218c815","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" pseudo-element creates bubbles above the button.\n\nThe ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" pseudo-element creates bubbles below the button.","styles":{}}],"children":[]},{"id":"f79bb775-e56d-4dc8-993c-77fee3878134","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Top Bubble Animation\n\nWhen the button is hovered, ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" runs ","styles":{}},{"type":"text","text":"topBubbles","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"49dca716-e3ac-4ee9-9d21-8158f5b0a36f","type":"procode","props":{"code":".bubble-pill-button:hover::before {\n animation: topBubbles 0.6s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ufy33pewa\",\"name\":\"code\",\"code\":\".bubble-pill-button:hover::before {\\n animation: topBubbles 0.6s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33987d4a-9336-4110-99cd-f5fd9f75a477","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The animation changes ","styles":{}},{"type":"text","text":"background-position","styles":{"code":true}},{"type":"text","text":" so the radial-gradient bubbles move outward from the button. At the end, the ","styles":{}},{"type":"text","text":"background-size","styles":{"code":true}},{"type":"text","text":" becomes ","styles":{}},{"type":"text","text":"0% 0%","styles":{"code":true}},{"type":"text","text":", so the bubbles disappear cleanly.","styles":{}}],"children":[]},{"id":"44cae91d-60f5-4de8-bf76-28c07e037f3e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bottom Bubble Animation\n\nThe bottom bubbles work the same way, but they use the ","styles":{}},{"type":"text","text":"::after","styles":{"code":true}},{"type":"text","text":" pseudo-element and the ","styles":{}},{"type":"text","text":"bottomBubbles","styles":{"code":true}},{"type":"text","text":" keyframes.","styles":{}}],"children":[]},{"id":"05bd848f-cb53-4635-8fe4-3d832785d37c","type":"procode","props":{"code":".bubble-pill-button:hover::after {\n animation: bottomBubbles 0.6s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"zhqf0hl7q\",\"name\":\"code\",\"code\":\".bubble-pill-button:hover::after {\\n animation: bottomBubbles 0.6s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d083d4cf-71dd-4c96-be26-3419ecc537ed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n\nThe media query disables animation and transition for users who prefer reduced motion.","styles":{}}],"children":[]},{"id":"a147ff50-e91e-4664-aa4b-f7520c60f6ad","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .bubble-pill-button,\n .bubble-pill-button::before,\n .bubble-pill-button::after {\n animation: none;\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"xve08v75x\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .bubble-pill-button,\\n .bubble-pill-button::before,\\n .bubble-pill-button::after {\\n animation: none;\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca13d217-463c-4d5a-a696-67f3c90c1e71","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]