React Button Hover States

Todo List > React Button Hover States

Let's add button hover states with styled-components. We'll use the &:hover { selector to add a set of styles applied only when the component is hovered over.

Your mission

Our IconButton and Button share some styles, so we can actually extend the Button's styles while creating the IconButton. You can search "extending styles" on styled-components documentation to see how to do this. As always, we'll show you how on the next lesson!

Lesson 11/20

import styled from "styled-components";

const Button = styled.button`
  border: 0;
  padding: 4px; 
  font-size: 16px; 
  color: white; 
  cursor: pointer; 
  height: 28px;
  padding: 4px 20px; 
  box-shadow: 0px 0px 5px silver; 
  background-color: black;

  &:hover {
    background: gray; 
  }
`;

export const IconButton = styled.button`
  background: transparent;
  box-shadow: none; 
  padding: 4px; 
  border: 0; 
  cursor: pointer; 

  &:hover {
    background: lightgray; 
  }
`;

export default Button;

Open Sandbox