How i can do an underline effect in my menu? - css

Question

I'm practicing my CSS, so after few tutorials I started to create a simple website. I want to create something like this:
How can I achieve that effect? I was looking for an answer in the internet and I just found only solutions with fancy animations and underline effects, but I couldn't find solution similar to my problem. I only achieved something like this:
This is my code
.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>

Answer 1

There is a gap and 'movement' on hover because the border is going from none to 4px.
A straightforward way round this is to give a border all the time, it's just that you make it transparent when there isn't a hover. That way there is nothing to move on the hover, the space is already there.
Note: this snippet also makes the long border less wide just to make it a little more like the first image in the question.
.button {
background-color: white;
border: none;
border-bottom: transparent 4px solid;
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 1px 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>