npm package: @ruchiralk/buttons
Description: A collection of styled buttons for React apps
Author: Ruchira
Latest version: 1.0.17

# Buttons (@ruchiralk/buttons)

@ruchiralk/buttons is an npm package that provides beautifully styled, responsive, and customizable buttons for your projects. Whether you need a simple button, a fancy button or an engaging like button, this package has you covered.

![Animated-Button](https://i.postimg.cc/NQPG2hHZ/buttons.png)

## 1. Installation

To install the package, use the following command:

```bash
npm i @ruchiralk/buttons
```

## 2. Setup

Import the package's styles into your React application:

```bash
import '@ruchiralk/buttons';
```

### Example:

![Animated-Button](https://i.postimg.cc/Smjdf8nj/code.png)

## 3. Use the buttons

### Coding button

```bash
<button className="codingbutton">Hover Me</button>
```

### Coding button 2

```bash
<button className="codingbutton2">Hover Me</button>
```

### Color type button

```bash
<button class="colortypebutton">Hello World</button>
```

### Cool-hover button

```bash
<button class="coolhover1">Button</button>
```

### Cool-hover button 2

```bash
<button class="coolhover2">Button</button>
```

### Cool-hover button 3

```bash
<button class="coolhover3">Button</button>
```

### Cool-hover button 4

```bash
<button class="coolhover4">Button</button>
```

### Cool-hover button 5

```bash
<button class="coolhover5">Button</button>
```

### Like-button

```bash
<div class="like-button">
    <input class="on" id="heart" type="checkbox" />
    <label class="like" for="heart">
        <span class="like-icon"></span>
        <span class="like-text">Likes</span>
    </label>
        <span class="like-count one">53</span>
        <span class="like-count two">54</span>
</div>
```

### Notofication button

```bash
<button class="notoficationbutton">
    <div class="bell"></div>
      Notifications
    <div class="arrow">›</div>
</button>
```

### Fancy button

```bash
<button class="fancybutton">Hover Me</button>
```

### Simple button 1

```bash
<button class="simplebutton">Hover Me</button>
```

### Simple button 2

```bash
<button class="simplebutton2">Hover Me</button>
```

### Simple button 3

```bash
<button class="simplebutton3">Hover Me</button>
```

### Simple button 4

```bash
<button class="simplebutton4">Hover Me</button>
```

### Simple button 5

```bash
<button class="simplebutton5">Hover Me</button>
```

### Simple button 6

```bash
<button class="simplebutton6">Hover Me</button>
```

### Simple button 7

```bash
<button class="simplebutton7">Hover Me</button>
```

## ✨Feedback

If you have any feedback, please reach me. www.ruchiralk.me | ruchiralkm@gmail.com

## 🔗 Links

[![portfolio](https://img.shields.io/badge/portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://www.ruchiralk.me/)
[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/ruchira-kaluarachchi)
[![twitter](https://img.shields.io/badge/github-ccccc?style=for-the-badge&logo=twitter&logoColor=white)](https://github.com/ruchiralkm)