Create 3 React Button Components using CSS, Bootstrap & Styled Components

In this React tutorial you are goin to learn how to create and style 3 React Button Components using CSS Bootstrap and React Styled Components

Useful links:

Bootstrap: (CSS Framework) https://getbootstrap.com/

React Styled-components https://styled-components.com/

Font Awesome: (Icons for websites) https://fontawesome.com/

Table of content

• Project overview
• Create React app using npx create-react-app
• Create a React component
• Import a component in to your react app
• Style a react component using css
• Using props on react components
• Style a react button component using Bootstrap
• Using template literals in react S
• Style a react button component using react styled components
• Install Styled Components in React
• What are react styled components

Create and Style 3 React Button Components Project overview

Creating and Styling Button components in react can be extremely easy, you just have to use the right technology, or the right one for you. Whether it is by creating styling them using regular CSS for complete control, using a CSS framework like Bootstrap in order to get the job don quick and ease, ore the more complicated React styled components library, it is completely up to you witch path you wish to choose.

In order to make your life a bit easier, in this react tutorial I am boing to show you 3 ways you could handle it by creating and styling 3 React button components using CSS, Bootstrap and React Styled-components.

So let’s get started…

Create React app using npx create-react-app

First you need to create you application using npx

npx create-react app button-components

Now let’s start our react application using the command

npm start

Here is a more in detailed guid on now to create a react application

Create a React component

All of your components will be located in a folder called components. So place go ahed and create the components folder in your src folder.

import React from "react";

function Button() {
  return <button>CSS</button>;
}

export default Button;

Import a component in to your react app

Now lets go to you App.js file and import the component from its path and also use it as a component in our application.

import logo from "./logo.svg";
import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Button />
       
      </header>
    </div>
  );
}

export default App;

Style a react component using css

In you CSS file is where you will do your regular styling for the component.

button {
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  border: none;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
button.pink {
  background-color: #e83e8c;
  color: #fff;
}
button:hover {
  opacity: 0.9;
}
button.pill {
  border-radius: 15px;
}
button.lg {
  padding: 0.5rem 1.2rem;
}
button:active {
  transform: scale(0.98);
  box-shadow: none;
}

Using props on react components

Using react props you can now add different properties to you component like classes and text.

import React from "react";

function Button({ type, text }) {
  return <button className={type}>{text}</button>;
}

export default Button;

import logo from "./logo.svg";
import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Button type="pink pill lg" text="CSS" />
        <Button text="add" type="pill lg" />
        <Button text="Bootstrap" type="btn btn-primary" />
      </header>
    </div>
  );
}

export default App;

Style a react button component using Bootstrap

import React from "react";

function Btn({ type, btnColor, text }) {
  return (
    <button type={type} className={`"btn" btn-${btnColor}`}>
      {text}
    </button>
  );
}

export default Btn;

import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Button type="pink pill lg" text="CSS" />
        <Button text="add" type="pill lg" />
        <Button text="Bootstrap" type="btn btn-primary" />

<Btn type="submit" btnColor="outline-danger" text="Success" />

      </header>
    </div>
  );
}

export default App;

Using template literals in react

 <button type={type} className={`"btn" btn-${btnColor}`}>

Style a react button component using react styled components

React Styled-Components are extremely useful if you wish to write regular CSS in React JS.

For more on Styled components visit the official site: https://styled-components.com/

Install Styled Components in React

To download styled-components run:

npm install --save styled-components

Check you package.json to verify the installation.

Create a React Styled Component

In order to create a react Styled component you will first need to create a Styles folder where usually all of the styles for each component will be stored. Essentially here ist where the component will be styled and the later on when you will create the component you are going to apply the style from the exported function.

import styled from "styled-components";

export const StyledButton = styled.button`
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  border: none;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);

  &.orange {
    background-color: #fd7e14;
    color: #000;
  }
  &.indigo {
    background-color: #6610f2;
    color: #fff;
  }

  &:hover {
    opacity: 0.9;
  }
  &.pill {
    border-radius: 15px;
  }
  &.lg {
    padding: 0.5rem 1.2rem;
  }
  &:active {
    transform: scale(0.9);
    box-shadow: none;
  }
`;

What are react styled components

import { StyledButton } from "./Styles/Button.style";

import React from "react";

function StBtn({ type, text }) {
  return <StyledButton className={type}>{text}</StyledButton>;
}

export default StBtn;

For more detailed explanation check out the full video tutorial.

Video for this post