ButtonAdda

Expressive, Animated & Interactive Buttons for React

🌐 For Live Preview :-

🚀 Click To Open:)

Open the ButtonAdda library site to explore components, props, and usage.

🚀 About the Project :-

ButtonAdda is an open-source React component library containing 49+ animated, interactive and customizable button components.

Instead of creating animations, hover effects and interactions from scratch every time, ButtonAdda allows developers to directly import expressive button components into their React applications.

ButtonAdda is built for developers who want to add personality, interaction and creative motion to their interfaces without repeatedly building complex button effects from scratch.

🎨 ButtonAdda Includes :-

ButtonAdda includes buttons with:

• ✨ Glow Effects
• 🧲 Magnetic Interactions
• 🎮 Playful Animations
• ⚡ Interactive Effects
• 🧊 3D Components
• 🌈 Color Animations
• 🌌 Particle Effects
• 🌀 Portal & Space Effects
• 👆 Hover Interactions
• 🎨 Customizable Props

💡 Features :-

• ⚛️ Built specifically for React
• 🎨 49+ unique button components
• 🚀 Easy installation using npm
• 🧩 Import only the components you need
• ✨ Animated and interactive UI components
• 🛠️ Customizable using component props
• 🎯 Multiple button categories
• 💫 Unique hover and click interactions
• 📱 Responsive and developer-friendly
• ⚡ Easy to integrate into existing React projects
• 🌙 Modern UI and animation-focused components
• 🔥 No need to build complex button animations from scratch
• 📖 Documentation with component examples and usage
• 📋 Copyable component code examples

📦 Installation :-

Install ButtonAdda using npm:

npm install button-adda

Or using Yarn:

yarn add button-adda

Or using pnpm:

pnpm add button-adda

🚀 Quick Start :-

Import any ButtonAdda component directly into your React application:

import { AuroraButton } from "button-adda";

function App() {
  return (
    <div>
      <AuroraButton>
        Click Me
      </AuroraButton>
    </div>
  );
}

export default App;

That's it! 🎉

🧩 Import Components :-

You can import individual components:

import { AuroraButton } from "button-adda";

You can also import multiple components together:

import {
  AuroraButton,
  BlackHoleButton,
  CableSendButton,
  ColorBurstButton,
  CyberButton,
  NeonButton,
} from "button-adda";

Then use them normally inside your React application:

🔥 Components :-

ButtonAdda currently includes 49+ animated and interactive React button components.

Available Components :-

• AuroraButton
• BlackHoleButton
• CableSendButton
• ColorBurstButton
• ControlPanelButton
• CopyButton
• CyberButton
• DialButton
• DiceButton
• DNAButton
• ElectricButton
• FireButton
• FuseGlowButton
• GamepadButton
• GhostButton
• GlassButton
• GlowButton
• GradientButton
• HologramButton
• IceBreakButton
• InkButton
• KeycapButton
• LiquidButton
• LiquidGlassButton
• LoadingButton
• MagneticButton
• MagneticGlowButton
• MagneticTextButton
• MoodButton
• MorphButton
• NeonButton
• OrbitButton
• ParticleButton
• PlasmaButton
• PortalButton
• PressHoldButton
• ProgressButton
• PuppyButton
• RainbowButton
• RippleButton
• RippleWaveButton
• ShimmerButton
• SplitButton
• SpotlightButton
• StarfieldButton
• SwipeActionButton
• ThreeDButton
• TiltCardButton
• ToggleButton

🛠️ Customization :-

Many ButtonAdda components support customizable props.

Depending on the component, you can customize properties such as:

• 🎨 Color
• 📝 Text Color
• 📏 Width
• 📐 Height
• 🔘 Border Radius
• ✨ Animation Intensity
• ⚡ Animation Speed
• 🎯 Interaction Behavior
• 🚫 Disabled State

Example:

import { AuroraButton } from "button-adda";

function App() {
  return (
    <AuroraButton
      color="#8b5cf6"
      textColor="#ffffff"
      width={180}
      height={52}
      radius={14}
      intensity={1}
    >
      Custom Button
    </AuroraButton>
  );
}

export default App;

⚠️ Available props may vary depending on the individual component. Check the ButtonAdda library site for component-specific props and detailed documentation.

📖 Documentation :-

The ButtonAdda documentation website provides a complete component exploration experience.

Each component can include:

• 🟢 Live Preview
• 🎨 Default State
• 🛠️ Customized State
• 👆 Hover State
• 🚫 Disabled State
• ⚙️ Available Props
• 💻 Usage Example
• 📋 Copyable Code
• 🧩 Component Details

Explore the collection, choose a button and copy the code directly into your React project.

💻 Development :-

0️⃣ Get the Project Code

Clone the repository:

git clone https://github.com/reejalchoudhary/button-adda.git

Move into the project directory:

cd button-adda

OR Download the ZIP

Go to:

Code → Download ZIP

Then:

1. Extract the downloaded ZIP.
2. Open the project folder in your code editor.
3. Install the dependencies.

1️⃣ Install Dependencies

npm install

2️⃣ Run the Development Server

npm run dev

The development server will usually be available at:

http://localhost:5173

🗂️ Component Categories :-

ButtonAdda components are organized into different interaction styles.

| Category | Description | |---|---| | ✨ Glow | Glowing and lighting effects | | ⚡ Interactive | Click, hover and interaction effects | | 🧊 3D | Depth and 3D-style interactions | | 🧲 Magnetic | Cursor-reactive magnetic effects | | 🎮 Playful | Fun and expressive animated effects | | 🌌 Special | Experimental and creative effects |

🤝 Contributing :-

Contributions are always welcome! ❤️

You can contribute by:

• 🆕 Adding new button components
• ✨ Improving animations
• ⚙️ Adding customization props
• 🐛 Fixing bugs
• ♿ Improving accessibility
• 📖 Improving documentation
• 🎨 Creating new interaction styles
• 🚀 Improving performance

Contribution Steps :-

1️⃣ Fork the Repository

Fork the ButtonAdda repository on GitHub.

2️⃣ Clone Your Fork

git clone https://github.com/reejalchoudhary/button-adda.git

3️⃣ Create a New Branch

git checkout -b feature/amazing-button

4️⃣ Make Your Changes

Create your component or improve an existing part of the project.

5️⃣ Commit Your Changes

git add .
git commit -m "Add amazing button component"

6️⃣ Push Your Branch

git push origin feature/amazing-button

7️⃣ Open a Pull Request

Open a Pull Request and describe your changes.

💡 Ideas for Contributions :-

Some ideas for future contributions:

• 🫧 New animated button styles
• 🧲 Advanced magnetic interactions
• 🎯 Cursor tracking effects
• 🌊 Wave-based interactions
• 💥 New click effects
• 🌌 Space-themed interactions
• 🎮 Game-inspired UI buttons
• 🤖 AI-inspired interactions
• ♿ Accessibility improvements
• ⚡ Performance improvements

🐛 Found a Bug? :-

If you find a bug, please open an issue and include:

• What happened
• What you expected
• Steps to reproduce the issue
• Screenshots or videos if possible
• Browser information
• React version
• Relevant error messages

📄 License :-

ButtonAdda is licensed under the MIT License.

See the LICENSE file for details.

📲 Follow Me :-

📡 Contact Me :-

• Email📧: [email protected]
• Mobile📞: 7018361108

BUTTON ADDA

Buttons that do more.

49+ Animated, Interactive & Customizable Buttons for React.

Made with ❤️ and lots of animations.

⭐ If you like ButtonAdda, don't forget to star the repository!

🔎 Keywords :-

react react-components react-button react-buttons button-library react-button-library animated-buttons animated-react-components interactive-buttons customizable-buttons ui-components ui-library frontend-components javascript jsx npm-package react-ui modern-ui button-components web-components frontend-library react-ui-library animated-ui interactive-ui css-animations hover-effects glow-buttons magnetic-buttons 3d-buttons modern-react-components open-source-react-library