How to add circle button in react js?

May 07, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add circle button in react js, you can set border-radius: 50%; in .circular-button. It will add circle button in react js.

Today, I am going to show you, how to add circle button in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following line to the top of your component file.

import React from 'react';
import './App.css'; // Import your CSS file

Step 3: Create a Component.

You can set className="circular-button" to add circle button in react js.

<div>
    <button className="circular-button">Click me</button>
</div>

Define the add circle button example.

The below code is an example of a React. You have to import ./App.css and You can set border-radius: 50%; in .circular-button to add circle button in react js.

App.js

import React from 'react';
import './App.css'; // Import your CSS file

function App() {
  return (
    <div>
      <button className="circular-button">Click me</button>
    </div>
  );
}

export default App;

App.css

.circular-button {
    border-radius: 50%;
    width: 50px; /* Adjust the size as needed */
    height: 50px; /* Adjust the size as needed */
    background-color: #ff7b00; /* Adjust the background color */
    color: #fff; /* Adjust the text color */
    border: none;
    font-size: 10px; /* Adjust the font size */
  }
  
  .circular-button:hover {
    background-color: #ff7b00; /* Adjust the hover background color */
    cursor: pointer;
  }

In the above code example, I have used the border-radius: 50%; css and added circle button in react js.

Check the output of the above code example.

All the best 👍