Styled-Component Button href/onclick not working

Question

I'm learning JS/trying to get a website up using gatsby and need to use buttons and have been using styled-components.

the buttons show up and when I hover over it does turn yellow but I i dont get a grabber mouse when I hover nor when I click do the buttons open up google

please help :)

I tried just using an href attribute like https://www.styled-components.com/ was used on the main website

<Button
     href="https://github.com/styled-components/styled-components"
     target="_blank"
     rel="noopener"
     primary
   >

but didn't work either

here is the styled button component

const Button = styled.button`
  border: none;
  height: 3rem;
  width: 50%;
  border-radius: .5rem;
  margin: 2% 25% 3% 25%;
  z-index:5;

  background-color: ${props => props.theme.grey};
  color: ${props => props.theme.offWhite};
  &:hover {
    background: ${props => props.theme.yellow};
    color: ${props => props.theme.grey};
  }

and here is the offending code

<button onclick="window.open('https://www.google.com', '_blank');"> work</button>
<Button click={() => 'https://www.google.com';}}>pleaseWork </Button>

Answer 1

You should add styled.a not styled.button to have access to href prop.

Now you can add Styled Component like the website:

<Button
     href="https://github.com/styled-components/styled-components"
     target="_blank"
     rel="noopener"
     primary
   >

See this demo