¿Cómo puedo hacer un efecto de subrayado en mi menú?

Estoy practicando mi CSS, así que después de algunos tutoriales empecé a crear un sitio web simple. Quiero crear algo como esto:

https://i.stack.imgur.com/nXUcj.jpg

¿Cómo puedo lograr ese efecto? Busqué una respuesta en internet y solo encontré soluciones con animaciones elegantes y efectos de subrayado, pero no encontré una solución similar a mi problema. Solo logré algo como esto:

https://i.stack.imgur.com/CxHdH.jpg

Este es mi código:

.button {
  background-color: white;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
}

.button:hover {
  background-color: white;
  border-bottom: #55415f 4px solid;
  color: #55415f;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
}

.r_menu {
  display: flex;
  justify-content: flex-end;
  border-bottom: black 3px solid;
  gap: 20px;
  margin: 0;
}

<div class="r_menu">
  <button class="button">Home page</button>
  <button class="button">Style demo</button>
  <button class="button">Full width</button>
  <button class="button">Portfolio</button>
  <button class="button">Gallery</button>
  <button class="button">Dropdown</button>
</div>