Why is the HTML button background color filled in wrong?-CodePudding

New to HTML. The toggle button changes between the patient and employee login. The background colour for patient login (image 1) works, but the employee login (image 2) does not. I have tried changing the width in #btn but it's never filled in correctly. How do I fix this?

The code:

.button-box {
  width: 58%;
  margin: 40px auto;
  position: relative;
  box-shadow: 0 0 1px 1px rgb(225, 224, 224);
}

.toggle-btn {
  padding: 10px 5px;
  cursor: pointer;
  background: transparent;
  border: 0;
  position: relative;
  text-align: center;
  color: black;
  outline: none;
  font-weight: bold;
  font-size: small;
}

#btn {
  top: 0;
  left: 0;
  position: absolute;
  width: 45%;
  height: 100%;
  transition: 0.1s;
  background: linear-gradient(to bottom right, #1f9cd5, #c7e3f1);
}

<div >
  <div id="btn"></div>
  <button type="button" >Patient Login</button>
  <button type="button" > Employee Login</button>
</div>

https://i.stack.imgur.com/wzBu7.png

https://i.stack.imgur.com/mT7vP.png

CodePudding user response：

.button-box {
  width: 58%;
  margin: 40px auto;
  position: relative;
  box-shadow: 0 0 1px 1px rgb(225, 224, 224);
}

.toggle-btn {
  padding: 10px 5px;
  cursor: pointer;
  background: transparent;
  border: 0;
  position: relative;
  text-align: center;
  color: black;
  outline: none;
  font-weight: bold;
  font-size: small;
background: linear-gradient(to bottom right, #1f9cd5, #c7e3f1);
}

#btn {
  top: 0;
  left: 0;
  position: absolute;
  width: 45%;
  height: 100%;
  transition: 0.1s;
  
}

<div >
  <div id="btn"></div>
  <button type="button" >Patient Login</button>
  <button type="button" > Employee Login</button>
</div>

CodePudding user response：

Maybe try something like this:

.button-box {
  width: 58%;
  margin: 40px auto;
  position: relative;
  box-shadow: 0 0 1px 1px rgb(225, 224, 224);
}

.toggle-btn {
  padding: 10px 5px;
  cursor: pointer;
  background: transparent;
  border: 0;
  position: relative;
  text-align: center;
  color: black;
  outline: none;
  font-weight: bold;
  font-size: small;
}

#btn {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.1s;
  background: linear-gradient(to bottom right, #1f9cd5, #c7e3f1);
}

<div >
  <div style="position: relative;width: max-content;">
    <div id="btn"></div>
    <button type="button" >Patient Login</button>
    <button type="button" > Employee Login</button>
  </div>
</div>

Explanation:
The additional div resizes on the size of the 2 buttons, so the div#btn takes the maximum size.

If you don't need to add anything inside the div#btn it would be better to put the linear-gradient directly to the parent div.