Social Action Hover Buttons

[{"id":"4b45010e-5dad-47f6-ac54-982c138faf6f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"975c0b39-9a62-40d3-8391-c8e689e9a58c","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: #ffffff;\\n font-family: Arial, sans-serif;\\n}\\n\\n.page-center {\\n width: 100%;\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.action-wrap {\\n position: relative;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-direction: column;\\n gap: 8px;\\n padding: 6px;\\n background: #000000;\\n border-radius: 9999px;\\n overflow: visible;\\n}\\n\\n.backdrop {\\n display: none;\\n}\\n\\n.action {\\n width: 38px;\\n height: 38px;\\n border: none;\\n outline: none;\\n cursor: pointer;\\n padding: 0;\\n color: #000000;\\n background: transparent;\\n border-radius: 9999px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n}\\n\\n.action-icon {\\n width: 32px;\\n height: 32px;\\n padding: 7px;\\n color: #000000;\\n background: #ffffff;\\n border: 1px solid #000000;\\n border-radius: 9999px;\\n position: relative;\\n z-index: 2;\\n transform: scale(1) translateX(0);\\n transition:\\n transform 300ms ease,\\n background-color 300ms ease;\\n}\\n\\n.action:hover .action-icon {\\n background: #ffffff;\\n transform: scale(1.35) translateX(10px);\\n}\\n\\n.action:active .action-icon {\\n transform: scale(1.2) translateX(8px);\\n}\\n\\n.action-content {\\n display: none;\\n}\\n\\n.action::after,\\n.action-content::after,\\n.action-content::before {\\n display: none;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .action-icon {\\n transition: none;\\n }\\n\\n .action:hover .action-icon,\\n .action:active .action-icon {\\n transform: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Social Action Hover Buttons\\n \\n \\n \\n

\\n

\\n \\n\\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":"/styles.css","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"278a4fe7-e64c-4c47-a980-df7904ee9f39","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a07b2272-51d4-4a3d-988c-0962e30d2dad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"507670df-212b-4c57-893a-3f41528dc964","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"d4a11b6d-c0b2-4a3c-9142-d6f58e8fc519","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n\\n \\n\\n \\n\\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dea4c9cf-5a28-4a06-91fc-75f5fa31dcc3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"4b31b4c5-131a-4cb0-8c6c-6ad409b6e6df","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: #ffffff;\\n font-family: Arial, sans-serif;\\n}\\n\\n.page-center {\\n width: 100%;\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.action-wrap {\\n position: relative;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n flex-direction: column;\\n gap: 8px;\\n padding: 6px;\\n background: #000000;\\n border-radius: 9999px;\\n overflow: visible;\\n}\\n\\n.backdrop {\\n display: none;\\n}\\n\\n.action {\\n width: 38px;\\n height: 38px;\\n border: none;\\n outline: none;\\n cursor: pointer;\\n padding: 0;\\n color: #000000;\\n background: transparent;\\n border-radius: 9999px;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n}\\n\\n.action-icon {\\n width: 32px;\\n height: 32px;\\n padding: 7px;\\n color: #000000;\\n background: #ffffff;\\n border: 1px solid #000000;\\n border-radius: 9999px;\\n position: relative;\\n z-index: 2;\\n transform: scale(1) translateX(0);\\n transition:\\n transform 300ms ease,\\n background-color 300ms ease;\\n}\\n\\n.action:hover .action-icon {\\n background: #ffffff;\\n transform: scale(1.35) translateX(10px);\\n}\\n\\n.action:active .action-icon {\\n transform: scale(1.2) translateX(8px);\\n}\\n\\n.action-content {\\n display: none;\\n}\\n\\n.action::after,\\n.action-content::after,\\n.action-content::before {\\n display: none;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .action-icon {\\n transition: none;\\n }\\n\\n .action:hover .action-icon,\\n .action:active .action-icon {\\n transform: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc60bfa3-1812-4e6a-9ca9-29a6b2037e19","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d821374e-07bc-4640-b9b0-6aa499083daf","type":"divider","props":{},"children":[]},{"id":"222c58d1-548f-4444-b33c-aa69d271b697","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"0dbcc210-d1bd-4eb5-b062-ab819ce8ae8a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The component uses one vertical wrapper, three icon buttons, and one hidden backdrop.","styles":{}}],"children":[]},{"id":"4438f74d-5df2-4f24-b32c-d4b8c60dccfc","type":"procode","props":{"code":"

\n \n\n

","language":"javascript","filename":"","files":"[{\"id\":\"9ogqfdcpf\",\"name\":\"code\",\"code\":\"

\\n \\n\\n

\\n

\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9873180c-2ad8-40ad-a5f0-65b07f493abd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout / Center","styles":{}}],"children":[]},{"id":"b63dbd32-7193-4d9a-8fb3-7856dd5b8938","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":".page-center","styles":{"code":true}},{"type":"text","text":" centers the component in the browser.","styles":{}}],"children":[]},{"id":"3b21fc94-118c-496d-bdc2-a85b5f95cdf9","type":"procode","props":{"code":".page-center {\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"88weytq66\",\"name\":\"code\",\"code\":\".page-center {\\n width: 100%;\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93a73a69-493e-4dcd-8c9c-2b88e0a6eac4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Black Container","styles":{}}],"children":[]},{"id":"38a5324e-a79f-4520-9097-23d7721ed7c8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":".action-wrap","styles":{"code":true}},{"type":"text","text":" is the pill container. It uses solid black only, with no shadow and no gradient.","styles":{}}],"children":[]},{"id":"c54549c3-3312-4907-9a41-5483dd886056","type":"procode","props":{"code":".action-wrap {\n gap: 8px;\n padding: 6px;\n background: #000000;\n border-radius: 9999px;\n overflow: visible;\n}","language":"javascript","filename":"","files":"[{\"id\":\"sb5mxbti9\",\"name\":\"code\",\"code\":\".action-wrap {\\n gap: 8px;\\n padding: 6px;\\n background: #000000;\\n border-radius: 9999px;\\n overflow: visible;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"065b24ea-0160-4871-adb2-a89673b2c4f8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Remove Backdrop Effect","styles":{}}],"children":[]},{"id":"b8a6708b-bec1-4c70-9302-874bce8c78b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The old backdrop animation is disabled.","styles":{}}],"children":[]},{"id":"11620073-91e2-4569-9068-5e79bd0a7a42","type":"procode","props":{"code":".backdrop {\n display: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"hlngg8eq4\",\"name\":\"code\",\"code\":\".backdrop {\\n display: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"352c9a97-13ed-4c66-8a6b-722093d73ed2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Circle Icon","styles":{}}],"children":[]},{"id":"de7b21d1-0e62-43f5-a2bc-a416ef2e75ac","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Each SVG becomes the white circular icon. The circle now has a black border.","styles":{}}],"children":[]},{"id":"f55aec60-fc36-42fc-b6b0-37a62e9a967a","type":"procode","props":{"code":".action-icon {\n width: 32px;\n height: 32px;\n padding: 7px;\n color: #000000;\n background: #ffffff;\n border: 1px solid #000000;\n border-radius: 9999px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"b8lm25olo\",\"name\":\"code\",\"code\":\".action-icon {\\n width: 32px;\\n height: 32px;\\n padding: 7px;\\n color: #000000;\\n background: #ffffff;\\n border: 1px solid #000000;\\n border-radius: 9999px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f193245c-08c2-4547-ad13-23ff5deff33f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Scale And Move","styles":{}}],"children":[]},{"id":"82fa7705-138e-4485-8bcc-71c370d204f0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the icon scales up and moves to the right.","styles":{}}],"children":[]},{"id":"3f7ec433-e59e-437e-b23d-28b59a1e4a18","type":"procode","props":{"code":".action:hover .action-icon {\n background: #ffffff;\n transform: scale(1.35) translateX(10px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"zvsf2iyul\",\"name\":\"code\",\"code\":\".action:hover .action-icon {\\n background: #ffffff;\\n transform: scale(1.35) translateX(10px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c8ed5ab2-17b7-49fa-9ecb-b656b7e407c7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Press","styles":{}}],"children":[]},{"id":"99d7f635-1fa0-4603-a5e7-79873144b740","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the icon stays moved but scales down slightly.","styles":{}}],"children":[]},{"id":"0fd1fe30-0938-47b3-941e-c17a5212c0fd","type":"procode","props":{"code":".action:active .action-icon {\n transform: scale(1.2) translateX(8px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"519m9ow5c\",\"name\":\"code\",\"code\":\".action:active .action-icon {\\n transform: scale(1.2) translateX(8px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18304f8f-4702-468d-aa99-5d6bb863ed86","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Text Content","styles":{}}],"children":[]},{"id":"11721b60-5f60-43c9-9895-04ecf15980dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The label text is removed from the visual output.","styles":{}}],"children":[]},{"id":"f61d6f6f-de9d-4d95-a6ed-efedb9e1e0c5","type":"procode","props":{"code":".action-content {\n display: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"e4w338yh6\",\"name\":\"code\",\"code\":\".action-content {\\n display: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2b3e334-178e-4017-938d-479738764410","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion","styles":{}}],"children":[]},{"id":"576ac5e3-d632-4042-a010-3cd85ddfb66c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The media query removes transform animation for reduced-motion users.","styles":{}}],"children":[]},{"id":"660367c7-317e-4208-94fc-c064813677cc","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .action-icon {\n transition: none;\n }\n\n .action:hover .action-icon,\n .action:active .action-icon {\n transform: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"sjobxk4d4\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .action-icon {\\n transition: none;\\n }\\n\\n .action:hover .action-icon,\\n .action:active .action-icon {\\n transform: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d098a68f-395a-464c-9c62-5cd7d26ad629","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]