react mui 5 gradient button example

In this tutorial, we will create gradient button in react with material ui (mui 5). We will see mui 5 gradient button component, gradient button with icon example with react material UI 5.

Install & Setup Vite + React + Typescript + MUI 5

React Material UI 5 Gradient Button Example

1. Create react mui 5 gradient button using react-mui @mui/system.

import { Button } from "@mui/material";
import { styled } from "@mui/system";

const GradientButton = styled(Button)`
  background: linear-gradient(45deg, #ffa000 30%, #ffc107 90%);
  border-radius: 3px;
  border: 0;
  color: white;
  height: 48px;
  padding: 0 30px;
  box-shadow: 0 3px 5px 2px rgba(255, 160, 0, 0.3);
`;

export default function CustomGradientButton() {
  return (
    <>
      <GradientButton variant="contained">Gradient Button</GradientButton>
    </>
  );
}

react mui 5 gradient button

2. react mui 5 gradient button using sx prop.

import { Button } from "@mui/material";

export default function GradientButton() {
  return (
    <Button
      variant="contained"
      sx={{
        background: "linear-gradient(45deg, #FF3366 30%, #FF9933 90%)",
        borderRadius: "3px",
        border: 0,
        color: "white",
        height: "48px",
        padding: "0 30px",
        boxShadow: "0 3px 5px 2px rgba(255, 51, 102, 0.3)",
        transition: "box-shadow 0.3s ease-in-out",
        "&:hover": {
          boxShadow: "0 6px 10px 4px rgba(255, 51, 102, 0.3)",
        },
      }}
    >
      Gradient Button
    </Button>
  );
}

react mui 5 gradient button with sx prop

To use material ui icons you need to install @mui/icons-material.

Install the package in your project directory with:

# with npm
npm install @mui/icons-material

# with yarn
yarn add @mui/icons-material

3. react mui 5 gradient button with icon.

import { Button } from "@mui/material";
import { styled } from "@mui/system";
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";

const GradientButton = styled(Button)`
  background: linear-gradient(45deg, #2196f3 30%, #00b0ff 90%);
  border-radius: 3px;
  border: 0;
  color: white;
  height: 48px;
  padding: 0 30px;
  box-shadow: 0 3px 5px 2px rgba(33, 150, 243, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;

  &:hover {
    box-shadow: 0 6px 10px 4px rgba(33, 150, 243, 0.3);
  }
`;

export default function GradientButtonWithIcon() {
  return (
    <GradientButton variant="contained">
      <AddCircleOutlineIcon />
      Add Item
    </GradientButton>
  );
}