Here is my html code. I am trying to add a vertical line that seperates the login and sign up buttons, anybody have an idea how to do this?

 <header class="header">
      <h1>The Textbook Marketplace</h1>
      <div class="header-buttons">
        <button class="btn login-btn">Log In</button>
        <button class="btn signup-btn">Sign Up</button>
      </div>
    </header>

CodePudding user response：

add a div between them and give it proper height width and color

.line{
  background-color:black;
  height:20px;
  width:3px;
}

.header-buttons{
  display:flex;
  justify-content:center;
  align-items:center;
}

.btn{
  margin: 10px
}

<header class="header">
  <h1>The Textbook Marketplace</h1>
  <div class="header-buttons">
<button class="btn login-btn">Log In</button>
<div class="line"></div>
<button class="btn signup-btn">Sign Up</button>
  </div>
</header>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Depends of the height you want for the line. But I think the solution would be to put a border (for ex: solid 2px black) on the right border of the left button or vice versa if you put a border for the right button. Or, create a <div> between the two buttons and play with background color or the borders.