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

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;

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;