@pasmac/react-hamburger-button/StyledComponent.js

A very Simple Animated React Hamburger Button

import styled, {css} from "styled-components"

const StyledBtn = styled.button`
all: unset;
  width: ${({big})=>big?"80px":"50px"};
  height: ${({big})=>big?"80px":"50px"};
  position: relative;
  transition: all 500ms ease-in-out;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
`
export const Button = styled(StyledBtn)`  
  span{
    display: block;
    position: relative;
    border-radius: 5px;
    margin: auto;
    width: 90%;
    box-sizing: border-box;
    height: ${({big})=>big?"8px":"6px"};
    background-color: ${({color})=>typeof(color) == "string" ? color : "black"};
    box-shadow: 0px 2px 5px #ccc;
    transition: all 500ms ease-in-out;

    &::before, &::after{
      content: "";
            display: block;
            position: absolute;
            border-radius: 5px;
            margin: auto;
            width: 100%;
            height: ${({big})=>big?"8px":"6px"};
            background-color: ${({color})=>typeof(color) == "string" ? color : "black"};
            box-shadow: 1px 1px 1px #ccc;
            box-sizing: border-box;
    }
    &::before{
      transform: ${({big})=>big?"translateY(-1.2em)":"translateY(-1em)"};
    }
    &::after{
      transform: ${({big})=>big?"translateY(1.2em)":"translateY(1em)"};
    }
  }
  ${({state})=>state && css`
    span{
      transform: translateX(-100%);
      background-color: transparent;
      box-shadow: none;
      &::before{
        transform: translate(100%, 0%) rotate(45deg);
      }
      &::after {
        transform: translate(100%, 0%) rotate(-45deg);
      }
    }
  `}
`

export const ButtonSVG = styled(StyledBtn)`
    &:active{
        transform: scale(0.9, 0.9);
    }
    svg.__hamburger, svg.__exit{
        width: 90%; height: 90%; position: absolute;
    }
    svg.__hamburger line, svg.__exit line{
        stroke:${({color})=>typeof(color) == "string" ? color : "black"};
        stroke-width:${({big})=>big?"8":"6"};
        stroke-linecap: round;
        transition: all 500ms ease-in-out;
    }
    svg.__exit line{
        transform: translateX(100%);
        stroke: transparent;
    }
    ${({state})=>(state && css`
        svg.__hamburger line{
            transform: translateX(100%);
            stroke: transparent;
        }
        svg.__exit line{
            transform: translateX(0%);
            stroke: ${({color})=>typeof(color) == "string" ? color : "black"};
        }
    `)}
`