Button with Link-CodePudding

<a href='/users/create'>
  <Button
    type='button'
    color='white'
    bg='buttons.green'
    boxShadow='md'
    _hover={{
    bg: 'buttons.greenHover',
    }}
  >
    Register
  </Button>
</a>

I created this 'button' to send to a registration page, but when <a></a> it cuts my 'button' in half and I don't know what to do to make it to size normal. Forgive me if the question is a bit silly.

CodePudding user response：

You can fix it with CSS using max-content

<a href='/users/create'>
  <Button
    style={{width:maxContent}
    type='button'
    color='white'
    bg='buttons.green'
    boxShadow='md'
    _hover={{
    bg: 'buttons.greenHover',
    }}
  >
    Register
  </Button>
</a>

CodePudding user response：

 <a href='/users/create'>
     <Button
      width ='auto'
      type='button'
      color='white'
      bg='buttons.green'
      boxShadow='md'
      _hover={{
      bg: 'buttons.greenHover',
      }}
     >
      Register
     </Button>
    </a>