While working on a knowledge base article’s page, I kept noticing how flat and mechanical most share buttons felt. They were functional, sure, but they lacked that satisfying feel that makes users want to interact with them. That’s what led to this exploration.

The first version was just a simple button with a basic hover effect. But during user testing, I noticed something interesting - users would often hover over the button multiple times just to see the animation again. That’s when I realized we could make sharing feel more playful and engaging without sacrificing functionality.

The glow effect wasn’t actually planned - it came from a happy accident while experimenting with CSS properties. I found that subtle visual feedback made users more confident in their interactions. Every animation timing was carefully tweaked based on real user interactions - too fast felt rushed, too slow felt laggy.

What surprised me most was how the different variants emerged naturally from different use cases. The bounce effect came from a team member’s suggestion that the button should feel more “springy” on mobile, while the rotate effect was inspired by how users naturally move their wrists when using touch devices.

Usage

// Basic usage of Glow Share Button
import { GlowShareButton } from "@/components/ShareButton";

const MyComponent = () => {
  return <GlowShareButton />;
};

Component VariantsPermalink

1. Glow EffectPermalink

• Scale animation on hover
• Platform-colored glow effects
• Sequential icon reveal

2. Bounce EffectPermalink

• Vertical slide animation
• Bouncing hover state
• Color transitions

3. Rotate EffectPermalink

• Rotation animation
• Gradient backgrounds
• Pulse effect on hover

APIPermalink

type PlatformConfig = {
  icon: React.ElementType;
  color: string;
  hoverBg: string;
  hoverText: string;
  gradient: string;
  label: string;
};

interface ShareButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  className?: string;
}

CustomizationPermalink

The component can be customized through:

• Platform configurations
• Animation timings
• Color schemes
• Icon sizes

Example of platform customization:

const customPlatform = {
  icon: Twitter,
  color: '#1DA1F2',
  hoverBg: 'hover:bg-[#1DA1F2]',
  hoverText: 'hover:text-[#1DA1F2]',
  gradient: 'hover:from-[#1DA1F2] hover:to-[#0D95E8]',
  label: 'Twitter'
};

Accessibility

The Button Component is built with accessibility in mind — screen reader friendly, keyboard navigable, high contrast ratios, and clear visual hierarchy.