React IconButton example

Todo List > React IconButton example

Here you can see we've created an IconButton component exported in our Button.js. This styles the button, but makes the background transparent using the background: transparent CSS.

Your mission

We'll want to add hover styles to both buttons. Give that a try!

Lesson 10/20

import styled from "styled-components";

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

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

export default Button;

Open Sandbox