Como fazer para um ":hover{cursor: pointer}" não aparecer também na "margin-right: .8rem" de um elemento?

Coloquei um "button:hover{ cursor: pointer }" em vários "button" e "margin-right: .8rem;" em todos. Mas o "cursor: pointer" aparece também nessa margem à direita ]; Alguém sabe o porquê?

.categories {
  padding: 1rem 2rem;
}

.category-section {
  display: flex;
  overflow: hidden;
}

.category {
  margin-right: .8rem;
  word-wrap: none;
  white-space: nowrap;
  border: 1px solid #ccc;
  border-radius: 50px;
  padding: .4rem .6rem;
  font-size: 15px;
}

.category:hover {
  cursor: pointer;
}
<div class="categories">

  <section class="category-section">

    <a href="#"><button class="category active">Tudo</button></a>
    <a href="#"><button class="category">Ao Vivo</button></a>
    <a href="#"><button class="category">Programação Diária</button></a>
    <a href="#"><button class="category">Música</button></a>
    <a href="#"><button class="category">Documentários</button></a>
    <a href="#"><button class="category">Filmes de Terror</button></a>
    <a href="#"><button class="category">LivesStreams</button></a>
    <a href="#"><button class="category">Vlogs de Programação</button></a>
    <a href="#"><button class="category">Música</button></a>
    <a href="#"><button class="category">Documentários</button></a>
    <a href="#"><button class="category">Filmes</button></a>
    <a href="#"><button class="category">LivesStreams</button></a>
    <a href="#"><button class="category">Outros</button></a>

  </section>
  <!--class=category-section-->

</div>
<!--class=categories-->