How to customize the appearance of a button in React Bootstrap?

While developing the ReactJS forms, and submission applications, we need to use Buttons to perform different functions. These buttons can be either created using HTML tags or by using the react-bootstrap library Buttons. In the react bootstrap library there are classes through which the button is been styled. But these classes offer a basic level of styling. So to address this issue, we can customize the appearance of a button in React Bootstrap using the style property, which helps to give different CSS styling to the button. In this article, we will customize the appearance of a button in React Bootstrap using Inline and CSS Styles.

Prerequisite:

• React JS
• React-Bootstrap

Steps to create React Application and installing Bootstrap:

Step 1: Create a React application using the following command:

npx create-react-app button-style

Step 2: After creating your project folder(i.e. button-style), move to it by using the following command:

cd button-style

Step 3: Now install react-bootstrap in your working directory i.e. button-style by executing the below command in the VScode terminal:

npm install react-bootstrap bootstrap

Step 4: Now we need to Add Bootstrap CSS to the index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

Project Structure:

Example 1: In this example, we have imported the Button component from the React Bootstrap library, we have created the two buttons that we will style and change its basic appearance.

Javascript

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
const App = () => {
    const [btnHover1, setBtnHover1] = useState(false);
    const [btnHover2, setBtnHover2] = useState(false);
    const mainSreen = {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
    };
    const geeks = {
        color: 'green',
        fontSize: '30px',
        marginBottom: '20px',
    };
    const btn1 = {
        backgroundColor: '#007BFF',
        color: 'white',
        borderRadius: '50px',
        padding: '10px 20px',
        margin: '10px',
        transition: 'transform 0.3s ease',
        transform: btnHover1 ? 'scale(1.1) rotate(5deg)' : 'scale(1)',
        boxShadow: btnHover1
            ? '0px 6px 12px rgba(0, 0, 0, 0.2)'
            : '0px 4px 6px rgba(0, 0, 0, 0.1)',
    };
    const btn2 = {
        backgroundColor: '#FF5733',
        color: 'white',
        borderRadius: '20px',
        padding: '12px 24px',
        margin: '10px',
        transition: 'transform 0.3s ease',
        transform: btnHover2 ? 'scale(1.2) rotate(-5deg)' : 'scale(1)',
        boxShadow: btnHover2
            ? '0px 6px 12px rgba(0, 0, 0, 0.2)'
            : '0px 4px 6px rgba(0, 0, 0, 0.1)',
    };
    return (
        <div style={mainSreen}>
            <h1 style={geeks}>GeeksforGeeks</h1>
            <h4>React-Bootstrap Button Appearance Using Inline Styles</h4>
            <Button
                style={btn1}
                onMouseEnter={() => setBtnHover1(true)}
                onMouseLeave={() => setBtnHover1(false)}
            >
                Button 1
            </Button>
            <Button
                style={btn2}
                onMouseEnter={() => setBtnHover2(true)}
                onMouseLeave={() => setBtnHover2(false)}
            >
                Button 2
            </Button>
        </div>
    );
};
export default App;

Output:

Example 2: In this example, rather than having the inline style or saving the styling in the object, we have used the external CSS file as App.css. In this file, we have defined the classes like button1, button2, and button3.

Javascript

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import './App.css';
const App = () => {
    const [isHover1, setIsHover1] = useState(false);
    const [isHover2, setIsHover2] = useState(false);
    const [isHover3, setIsHover3] = useState(false);
    return (
        <div className="container">
            <h1 className="geeks-heading">GeeksforGeeks</h1>
            <h4>React-Bootstrap Button Appearance
               Using CSS Styles</h4>
            <Button
                className={`button1 ${isHover1 ? 'dancing' : ''}`}
                onMouseEnter={() => setIsHover1(true)}
                onMouseLeave={() => setIsHover1(false)}
            >
                Button 1
            </Button>
            <Button
                className={`button2 ${isHover2 ? 'flying' : ''}`}
                onMouseEnter={() => setIsHover2(true)}
                onMouseLeave={() => setIsHover2(false)}
            >
                Button 2
            </Button>
            <Button
                className={`button3 ${isHover3 ? 'special-transition' : ''}`}
                onMouseEnter={() => setIsHover3(true)}
                onMouseLeave={() => setIsHover3(false)}
            >
                Button 3
            </Button>
        </div>
    );
};
export default App;

CSS

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.geeks-heading {
    color: green;
    font-size: 30px;
    margin-bottom: 20px;
}

.button1 {
    background: linear-gradient(to bottom right, #d0ff00, #0044CC);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    margin: 10px;
    transition: transform 0.5s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.button2 {
    background: linear-gradient(to bottom right, #FF5733, #ff0080);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 20px 40px;
    margin: 10px;
    transition: transform 0.5s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.button3 {
    background: linear-gradient(to bottom right, #2f00ff, #ff3333);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 10px;
    transition: transform 0.5s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.dancing {
    animation: dancing 1s ease infinite;
}

.flying {
    animation: flying 1s ease infinite;
}

.special-transition {
    animation: specialTransition 1s ease infinite;
}

@keyframes dancing {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes flying {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes specialTransition {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0);
    }
}

Output: