Button Customization

Style your wallet button to perfection

The WalletButton component is fully customizable and designed to seamlessly integrate with your brand. Apply any CSS classes, create stunning animations, and match your design system perfectly with complete creative freedom.

🎨 CSS Styling

Use any CSS classes or inline styles

📱 Responsive

Mobile-first design with breakpoints

⚡ Animations

Smooth transitions and effects

Basic Button Styling

Start with simple, clean styling using Tailwind CSS classes. Perfect for professional applications.

javascript

<WalletButton 
  label="Connect Wallet"
  style="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md shadow-md transition"
/>

💡 Tip: This style works great for corporate and professional applications.

Gradient & Effects

Create eye-catching buttons with gradients, shadows, and hover animations to make your dApp stand out.

javascript

<WalletButton 
  label="Connect Wallet"
  style="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300"
/>

Custom Button Labels

Personalize the button text to match your app's voice and brand personality. Add emojis, custom copy, or calls-to-action.

javascript

<WalletButton 
  label="🚀 Launch Wallet Connection"
  style="bg-black hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-lg border-2 border-white shadow-2xl transition-all duration-300"
/>

Responsive Design

Ensure your button looks perfect on all devices with responsive styling and mobile-first design principles.

javascript

<WalletButton 
  label="Connect Wallet"
  style="
    w-full sm:w-auto
    bg-blue-600 hover:bg-blue-700 
    text-white font-semibold 
    py-2 px-4 sm:py-3 sm:px-6 
    text-sm sm:text-base
    rounded-md sm:rounded-lg 
    shadow-md transition
  "
/>

Advanced Styling

Push the boundaries with complex animations, layered effects, and interactive elements for premium user experiences.

javascript

<WalletButton 
  label="Connect Wallet"
  style="
    relative overflow-hidden 
    bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600 
    hover:from-indigo-700 hover:via-purple-700 hover:to-pink-700
    text-white font-bold py-4 px-8 rounded-2xl 
    shadow-xl hover:shadow-2xl
    transform hover:scale-105 hover:rotate-1 
    transition-all duration-500 ease-out
    border-2 border-white/20
    backdrop-blur-sm
    before:absolute before:inset-0 
    before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent 
    before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700
  "
/>

⚡ Performance Note: Complex animations may impact performance on slower devices. Test across different devices.

Styling Best Practices

✅ Do

• Use consistent brand colors
• Test on mobile devices
• Maintain good contrast ratios
• Keep animations smooth

❌ Avoid

• Overly complex animations
• Poor color contrast
• Tiny click targets on mobile
• Jarring hover effects

Ready to Style Your Button?

You now have all the tools to create a wallet button that perfectly matches your brand. The possibilities are endless – make it uniquely yours!

Back to Setup Guide