🌟 AstroButton

Beautiful animated React buttons with star effects and dynamic features. Perfect for modern web applications that need eye-catching, interactive buttons.

✨ Features

• 🌟 Animated star background effects
• 🎨 Multiple variants and sizes
• 💫 Ripple click effects
• ⏳ Loading states with spinner
• 🎯 TypeScript support
• 📱 Responsive design
• 🔧 Highly customizable
• ⚡ Lightweight and performant

📦 Installation

```bash npm install astrobutton ```

🚀 Quick Start

```jsx import { AstroButton } from 'astrobutton';

function App() { return ( <AstroButton variant="primary" size="default" onClick={() => alert('Hello from space! 🚀')} > Click me! ); } ```

📖 API Reference

AstroButton Props

| Prop | Type | Default | Description | | ------------- | -------------------------------------------------- | ----------- | ------------------------- | | children | React.ReactNode | - | Button content | | variant | 'primary' \| 'secondary' \| 'outline' \| 'ghost' | 'primary' | Button style variant | | size | 'sm' \| 'default' \| 'lg' | 'default' | Button size | | loading | boolean | false | Show loading state | | loadingText | string | - | Text to show when loading | | startIcon | React.ReactNode | - | Icon before text | | endIcon | React.ReactNode | - | Icon after text | | fullWidth | boolean | false | Make button full width | | ripple | boolean | true | Enable ripple effect | | disabled | boolean | false | Disable button | | onClick | (e: MouseEvent) => void | - | Click handler |

Variants

• primary: Gradient background with animated colors
• secondary: Alternative gradient color scheme
• outline: Transparent background with border
• ghost: Subtle background with transparency

Sizes

• sm: Small button (10rem × 2.5rem)
• default: Standard button (13rem × 3rem)
• lg: Large button (16rem × 3.5rem)

🎨 Examples

Basic Usage

jsx <AstroButton onClick={() => console.log('Clicked!')}> Basic Button

With Loading State

jsx <AstroButton loading={isLoading} loadingText="Processing..." onClick={handleSubmit}

Submit Form >

With Icons

jsx <AstroButton startIcon={} endIcon={} variant="secondary"

Get Started >

Different Variants

jsx

Different Sizes

jsx

🎭 Styling

The AstroButton component uses inline styles for the star animations and comes with built-in CSS animations. No additional CSS imports are required.

Custom Styling

You can pass additional className props for custom styling:

jsx <AstroButton className="my-custom-class" style={{ margin: '10px' }}

Custom Styled >

🌟 Animation Details

• Star Background: Animated star field with rotating and moving effects
• Gradient Animation: Smooth color transitions across the button surface
• Ripple Effect: Click-triggered ripple animation from the click point
• Loading Animation: Rotating spinner during loading states

🔧 TypeScript Support

AstroButton is built with TypeScript and includes full type definitions:

tsx import { AstroButton, AstroButtonProps } from 'astrobutton';

const MyButton: React.FC = (props) => { return <AstroButton {...props} />; };

📱 Responsive Design

AstroButton works great on all screen sizes and supports touch interactions on mobile devices.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Joy

🔗 Links

• GitHub Repository
• npm Package
• Issues

Made with ❤️ and ✨ for the React community