How to make div (button) 100% instead of 50% when no other buttons

Question

I need that when there is only one button it will be 100% width:

css based answer if it's possible

Answer 1

You can make use of the :only-of-type selector to override the width property like in the below snippet.

.container {
  width: 200px;
  height: 50px;
  border: 1px solid red;
}

/* if button is input tag */
input[type='button'] {
  float: left;
  width: 50%;
  border: 1px solid green;
  background: blue;
  color: white;
}
input[type='button']:only-of-type {
  width: 100%;
  background: blue;
  color: white;
}

/* if button is button tag */
button {
  float: left;
  width: 50%;
  border: 1px solid green;
  background: blue;
  color: white;
}
button:only-of-type {
  width: 100%;
  background: blue;
  color: white;
}

<h4>For Buttons using input tag</h4>
<div class='container'>
  <input type='button' value='Button 1' />
  <input type='button' value='Button 2' />
</div>
<div class='container'>
  <input type='button' value='Button 1' />
</div>

<h4>For Buttons using buton tag</h4>

<div class='container'>
  <button>Button 1</button>
  <button>Button 2</button>
</div>
<div class='container'>
  <button>Button 1</button>
</div>

Answer 2

You can use flexbox to solve this problem:

.buttons {
  display:flex;
  flex-direction: row;
  align-items:stretch;
}
.btn {
  border:1px solid #000;
  text-align:center;
  width:100%;
}

<div class="buttons">
  <div class="btn">Test</div>
  <div class="btn">Test</div>
</div>
<div class="buttons">
  <div class="btn">Test</div>
</div>