Buttons

Stunning buttons with magnetic and glow effects.

Features

• Magnetic: Smooth shape-shifting animations
• Glow: Different appearances for hover, active, and focus states
• Customizable: Easy to modify colors, shapes, and animation timing

Installation

npm install motion/react lucide-react

Basic Usage

import { MagneticButton, GlowButton } from "@/components/button";

function MyComponent() {
  return (
    <div className="flex gap-4">
      <MagneticButton>Magnetic Button</MagneticButton>
      <GlowButton>Glow Button</GlowButton>
    </div>
  );
}

Props

Examples

Basic Magnetic Button

<MagneticButton>Magnetic Button</MagneticButton>

Custom Styled Button

<GlowButton>Glow Button</GlowButton>

With Icon

<MagneticButton>
  <Play className="mr-2 h-4 w-4" />
  Play Video
</MagneticButton>

Customization

Custom Colors

<MagneticButton className="bg-blue-500 text-white hover:bg-blue-600">
  Hover me
</MagneticButton>

Best Practices

1. Appropriate Use: Use buttons for primary actions or special interactions
2. Performance: Keep effects lightweight for better performance
3. Accessibility: Ensure buttons are accessible when animations are disabled
4. Consistency: Use consistent styles throughout your application
5. Mobile Optimization: Test on mobile devices for optimal touch experience

Accessibility

• ARIA Labels: Proper labels for screen readers
• Keyboard Navigation: Full keyboard support with focus indicators
• Reduced Motion: Respects prefers-reduced-motion media query
• Focus Management: Clear focus states and proper tab order

Performance Tips

1. CSS Transforms: Use CSS transforms for better performance
2. Hardware Acceleration: Leverage GPU acceleration with transform3d
3. Optimized Animations: Use will-change CSS property strategically
4. Debounced Events: Debounce rapid interactions for better performance

Troubleshooting

Button not morphing?

Check if Motion is properly installed and the component is wrapped in a motion provider.

Performance issues?

Consider using CSS-only animations or reducing animation complexity.

Styling conflicts?

Ensure no conflicting CSS classes are affecting the button styles.

Accessibility problems?

Test with screen readers and keyboard navigation to ensure proper accessibility.