It's not very common to use <button> elements instead of links for a user menu, but it is possible to style them to look like links.
Typically, buttons will inherit the system font family and size, so we usually opt for using <a> tags within <ul> and <li> tags enclosed in a <nav> tag.
To make a <button> resemble a link, you can remove its border and background, as well as override the default font settings by inheriting from the <html> or <body> font properties.
I placed your two buttons inside a <nav> tag and positioned them side by side using
flexbox with slight spacing between them.
Choosing appropriate units is also crucial. Using px may not be ideal as it lacks flexibility. Opting for the em unit allows for adjustments in font size to reflect changes in padding and spacing, maintaining balance in design.
In the CSS, I've included some comments in French for reference purposes.
html {
/* To match your animated GIF. */
font: 20px/1.4 Helvetica, Arial, sans-serif;
}
.user-menu {
display: flex; /* Side by side, default is row. */
gap: .5em; /* Adding a small space between buttons. */
}
.btn_nav {
position: relative; /* Required for absolute ::after element. */
font: inherit; /* Prevent inheriting OS button styles. */
color: black;
background: none; /* Removing button's gray background. */
border: none; /* Eliminating button borders. */
padding: .4em 1em; /* Adding space around the button. */
cursor: pointer; /* Changing mouse cursor to hand. */
}
.btn_nav::after {
content: '';
position: absolute; /* Relative to .btn_nav */
left: 0;
right: 0;
bottom: -.1em; /* Position the line slightly below button base. */
height: 2px; /* Line thickness. */
background-color: #689351; /* Line color. */
transition: all 0.3s ease; /* Smooth animation transition. */
opacity: 0; /* Initially invisible. */
}
/* On hover over button. */
.btn_nav:hover::after {
bottom: 0; /* Move line to sit on button base (consider padding). */
opacity: 1; /* Make line visible. */
}
<nav class="user-menu">
<button class="btn_nav">Sign Up</button>
<button class="btn_nav">Log In</button>
</nav>