React Button Component

React Router > React Button Component

Custom React Button Component for Homepage

Here we're styling up a custom Button for our homepage using styled-components. This isn't required, but it gives our app a much better feel and draws the eye toward the action we want the user to take. Coloring the button Black adds contrast to the rest of the page.

This font looks boring, so lets add Google Fonts in the next lesson.

Lesson 5/26

import styled, { css } from "styled-components";
import colors from "../styles/colors";
const { WHITE, BLACK } = colors;

const Button = styled.button`
  background-color: ${BLACK};
  color: ${WHITE};
  padding: 8px 15px;
  font-family: inherit;
  font-weight: 400;
  font-size: 20px;
  outline: 0;
  border: 0;
  margin: 10px 0px;
  cursor: pointer;
  max-height: 40px;
  box-shadow: 0px 2px 2px lightgray;
  transition: ease background-color 250ms;
  &:hover {
    opacity: 80%;
  }
  &:disabled {
    cursor: default;
    opacity: 0.7;
  }
`;

export default Button;

Open Sandbox