{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-button-51","type":"registry:block","title":"Expanding button from icon to label","description":"Expanding button from icon to label","dependencies":[],"registryDependencies":["button"],"files":[{"path":"c-button-51.tsx","type":"registry:block","content":"import { Button } from \"@/components/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <Button className=\"group/fab relative flex h-10 w-10 items-center overflow-hidden rounded-full px-3 transition-[width] duration-300 ease-in-out hover:w-32\">\n      <IconPlaceholder\n        lucide=\"PlusIcon\"\n        tabler=\"IconPlus\"\n        hugeicons=\"PlusSignIcon\"\n        phosphor=\"PlusIcon\"\n        remixicon=\"RiAddLine\"\n        aria-hidden=\"true\"\n        className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-transform duration-300 group-hover/fab:left-3 group-hover/fab:translate-x-0\"\n      />\n\n      <span className=\"ml-8 pr-2 whitespace-nowrap opacity-0 transition-opacity duration-300 group-hover/fab:opacity-100\">\n        Create New\n      </span>\n    </Button>\n  )\n}","target":"components/examples/c-button-51.tsx"}],"meta":{"order":51}}