Tabindex for Button inside Link

I've got this html

<a href="example.com">
  <button>Label</button>
</a>


The button is styled with css while the link has no styles/all the styles have been removed.

The issue I have is when tabbing through the site, focus first goes to the link, and then to the button. However, I only need one of these to be tabbed to as they are essentially a single component. What's the best way to fix this?

If I add tabindex="-1" to the button, functionally everything is good, but the focus styling on the button don't display.
While if I add it to the link, I'm worried this will effect accessibility. Will it? or this the proper solution?
Was this page helpful?