Icon Morph Button

A button with animated icon morphing, sliding text, and a pulsing background. Perfect for creative, modern, and interactive UIs.

Demo

Hover to see the icon morph and background pulse.

Install the required dependencies to get started:

bash

Add the following interface to your types file for consistent props and TypeScript support.

typescript

Import and use the IconMorphButton component in your Next.js application:

tsx

Prop	Type	Default	Description
`children`	`React.ReactNode`	`undefined`	The button label or content inside the button.
`initialIcon`	`React.ReactNode`	`<ArrowRight size={18} />`	Icon to display by default before hover.
`hoverIcon`	`React.ReactNode`	`<Check size={18} />`	Icon to display when the button is hovered.
`className`	`string`	`""`	Additional Tailwind or CSS classes to style the button.
`onClick`	`() => void`	`undefined`	Click handler function executed on button press.
`disabled`	`boolean`	`false`	Disables the button if set to true.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	HTML button type attribute.

Next.js 15+

Framer Motion

Tailwind CSS (recommended)

TypeScript (recommended)