Reagindo ao mouse

Um pseudo-seletor estiliza um elemento em um estado. O mais usado é :hover — quando o mouse está em cima:

.botao:hover {
  background-color: #5b21b6; /* escurece ao passar o mouse */
}

Isso dá o feedback que faz a interface parecer "viva".

Para a mudança não ser brusca, adicione uma transição no estado normal:

.botao {
  transition: 0.2s; /* anima as mudanças em 0,2s */
}

💡 A diferença entre um site "amador" e um "profissional" muitas vezes é só isto: botões que reagem suavemente ao :hover. Custa 2 linhas.