10+ Buttons Collection Using ReactJS

By Faraz - September 03, 2024

Learn how to create a stylish collection of 10+ buttons using ReactJS. Follow this easy guide with step-by-step instructions and setup tips.

Join us on Telegram

Read Also Blog post layout using HTML and CSS.jpg

Designing a Responsive Blog Post Layout with HTML and CSS

Introduction

In this tutorial, we will create a stunning collection of over 10 different buttons using ReactJS. These buttons will showcase various styles like gradients, glassmorphism, neumorphism, 3D effects, and more. This step-by-step guide will help you enhance your ReactJS skills and add stylish buttons to your projects.

Setup Environment

Before diving into the button creation process, ensure your development environment is set up properly. Here’s a quick guide to get you started:

Install Node.js: ReactJS requires Node.js for managing packages and running your development server. Download and install Node.js from nodejs.org. This will also install npm, the package manager for Node.js.
Code Editor: You'll need a code editor like Visual Studio Code (VSCode) to write and manage your code.
Create a New React Project: To quickly start with React, use Create React App, a tool that sets up a new React project with a sensible default configuration. Open your terminal or command prompt and run:
```
npx create-react-app button-component
```
This command creates a new React project named npx create-react-app buttons-collection.
Navigate to Your Project Directory: Move into your new project directory with:
```
cd buttons-collection
```

Add Font Awesome and Poppins to public/index.html: Open public/index.html and include the following lines in the <head> section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">

Step-by-Step Guide

Create a New React Component

Begin by creating a new component for your buttons. Name it ButtonsCollection.js and place it in the src directory of your React project. This component will render all the buttons with various styles.

import React from 'react';
import './ButtonsCollection.css'; 

const ButtonsCollection = () => {
  return (
    <div className="buttons-container">
      <div className="button-box">
        <button className="gradient-button">Gradient</button>
      </div>
      <div className="button-box bg-dark">
        <button className="glass-button">Glassmorphism</button>
      </div>
      <div className="button-box bg-gray">
        <button className="neumorphism-button">Neumorphism</button>
      </div>
      <div className="button-box">
        <button className="three-d-button">3D</button>
      </div>
      <div className="button-box">
        <button className="icon-button">
          <i className="fas fa-play"></i> Play
        </button>
      </div>
      <div className="button-box">
        <button className="border-button">Animated Border</button>
      </div>
      <div className="button-box">
        <button className="floating-button">Floating</button>
      </div>
      <div className="button-box">
        <button className="glowing-button">Glowing</button>
      </div>
      <div className="button-box">
        <button className="ripple-button">Ripple Effect</button>
      </div>
      <div className="button-box">
        <button className="outline-hover-button">Outline Hover</button>
      </div>
      <div className="button-box">
        <button className="skewed-button">Skewed Button</button>
      </div>
      <div className="button-box">
        <button className="shadow-button">Shadow</button>
      </div>
      <div className="button-box">
        <button className="round-icon-button">
          <i className="fas fa-heart"></i>
        </button>
      </div>
      <div className="button-box">
        <button className="text-icon-button">
          <i className="fas fa-download"></i> Download
        </button>
      </div>
      <div className="button-box">
        <button className="loading-button">
          Loading
          <div className="spinner"></div>
        </button>
      </div>
    </div>
  );
};

export default ButtonsCollection;

Add CSS Styling

Design your buttons with different styles such as gradients, glassmorphism, 3D effects, and more. Use CSS to add unique visual effects like shadows, animations, and gradients. Create a ButtonsCollection.css file in the src folder to style your buttons and import it into your component:

body {
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
  }
  .buttons-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    width: 100%;
  }
  .button-box {
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #222;
  }
  .bg-dark {
    background: linear-gradient(
          #101820 50%,
          crimson 50%
      );
  }
  .bg-gray{
    background: rgb(214, 214, 214);
  }
  button {
    font-family: 'Poppins',Arial, sans-serif;
    outline: none;
    cursor: pointer;
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 36px;
    transition: all 0.3s ease;
    color: white;
  }
  
  :root {
    --primary-color: #3498db; 
    --secondary-color: #e74c3c; 
    --tertiary-color: #2ecc71; 
    --accent-color: #9b59b6; 
    --background-color: #f4f4f4;
    --dark-color: #282936;
  }
  
  /* Button 1: Simple Gradient Button */
  .gradient-button {
    background: linear-gradient(
      45deg,
      var(--primary-color),
      var(--secondary-color)
    );
    border: none;
  }
  .gradient-button:hover {
    background: linear-gradient(
      45deg,
      var(--secondary-color),
      var(--primary-color)
    );
  }
  
  /* Button 2: Glassmorphism Button */
  
  .glass-button {
    margin: auto;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    backdrop-filter: blur(8px);
    cursor: pointer;
    border-radius: 5px;
    transition: 0.5s;
    border: 1px solid #ccc;
  }
  .glass-button:after, .skewed-button:after{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(
      45deg,
      transparent 50%,
      rgba(255, 255, 255, 0.03) 58%,
      rgba(255, 255, 255, 0.16) 67%,
      transparent 68%
    );
    background-size: 200% 100%;
    background-position: 165% 0;
    transition: 0.7s;
  }
  .glass-button:hover:after,.skewed-button:hover:after {
    background-position: -20% 0;
  }
  
  /* Button 3: Neumorphism Button */
  .neumorphism-button {
    min-width: 150px;
    padding: 15px 10px;
    margin: 20px;
    background: rgb(214, 214, 214);
    border: none;
    border-radius: 25px;
    color: var(--dark-color);
    box-shadow: -7px -7px 20px 0 rgba(255, 255, 255, 0.7),
      7px 7px 20px 0 rgba(0, 0, 0, 0.2);
  }
  
  .neumorphism-button:hover {
    box-shadow: inset -7px -7px 20px 0 rgba(255, 255, 255, 0.7),
      inset 7px 7px 20px 0 rgba(0, 0, 0, 0.2);
  }
  
  /* Button 4: 3D Button */
  .three-d-button {
    background: var(--tertiary-color);
    border: none;
    box-shadow: 0 5px #27ae60;
  }
  .three-d-button:active {
    transform: translateY(4px);
    box-shadow: 0 1px #27ae60;
  }
  
  /* Button 5: Icon Button */
  .icon-button {
    background: var(--accent-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .icon-button i {
    font-size: 14px;
  }
  .icon-button:hover {
    background: #8e44ad;
  }
  
  /* Button 6: Animated Border Button */
  .border-button {
    background: none;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    position: relative;
    overflow: hidden;
  }
  .border-button:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 300%;
    height: 100%;
    background: var(--primary-color);
    transition: all 0.4s ease;
    z-index: -1;
    transform: translateX(-50%);
  }
  .border-button:hover {
    color: white;
  }
  .border-button:hover:before {
    top: 0;
  }
  
  /* Button 7: Floating Button */
  .floating-button {
    background: var(--secondary-color);
    border: none;
    box-shadow: 0 15px 20px rgba(231, 76, 60, 0.4);
  }
  .floating-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px rgba(231, 76, 60, 0.4);
  }
  
  /* Button 8: Glowing Button */
  .glowing-button {
    background: var(--accent-color);
    border: none;
    box-shadow: 0 0 15px var(--accent-color);
  }
  .glowing-button:hover {
    box-shadow: 0 0 5px var(--accent-color),
                  0 0 25px var(--accent-color),
                  0 0 50px var(--accent-color),
                  0 0 200px var(--accent-color);
  }
  
  /* Button 9: Ripple Effect Button */
  .ripple-button {
    background: var(--dark-color);
    border: none;
    position: relative;
    overflow: hidden;
  }
  .ripple-button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease-out;
    z-index: 0;
  }
  .ripple-button:hover:after {
    transform: translate(-50%, -50%) scale(1);
  }
  
  /* Button 10: Outline Button with Hover Fill */
  .outline-hover-button {
    background: none;
    border: 2px solid var(--tertiary-color);
    color: var(--tertiary-color);
  }
  .outline-hover-button:hover {
    background: var(--tertiary-color);
    color: white;
  }
  
  /* Button 11: Skewed Button */
  .skewed-button {
    background: var(--primary-color);
    border: none;
    border-radius: 0;
    transform: skewX(-30deg);
  }
  
  /* Button 12: Shadow Button */
  .shadow-button {
    background: var(--dark-color);
    border: none;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }
  .shadow-button:hover {
    background: #2c3e50;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  }
  
  /* Button 13: Round Icon Button */
  .round-icon-button {
    background: var(--secondary-color);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .round-icon-button:hover {
    background: #c0392b;
  }
  
  /* Button 14: Text Button with Icon */
  .text-icon-button {
    background: var(--tertiary-color);
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
  }
  .text-icon-button i {
    font-size: 14px;
  }
  .text-icon-button:hover {
    background: #26d76e;
  }
  
  /* Button 15: Loading Button */
  .loading-button {
    background: var(--accent-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .loading-button .spinner {
    border: 3px solid #fff;
    border-radius: 50%;
    border-top: 3px solid transparent;
    width: 15px;
    height: 15px;
    animation: spin 0.8s linear infinite;
    margin-left: 10px;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

Integrate the Component

Import the ButtonsCollection component into your main App.js file. This will allow you to use your button collection throughout the application.:

import React from 'react';
import ButtonsCollection from './ButtonsCollection';

function App() {
  return (
    <div className="App">
      <ButtonsCollection />
    </div>
  );
}

export default App;

Test Your Buttons

Run your development server using:

npm start

This will open your React application in the browser. Verify that all buttons are displayed correctly and their styles are applied as expected. Adjust your CSS if needed to refine the appearance of your buttons.

Conclusion

In this tutorial, we created a collection of 10+ stylish buttons using ReactJS. We set up our development environment, styled the buttons with CSS, and integrated the component into our React project. Now you can use these buttons in your own applications to add a touch of style and functionality.

Buttons Live Demo ⟶

Read Also building the gta 5 weapon wheel using html, css and javascript.jpg

Fun Project: Building the GTA 5 Weapon Wheel Using HTML, CSS and JavaScript