Stack buttons vertically - html

Question

I am wondering how can I make some buttons to stack vertically and not horizontally in css.
So, the html would be like:
<button>Test<button>
<button>Test<button>
<button>Test<button>
And those buttons will by default stack horizontally, what I want is to make them stack vertically (so everyone's on top of the next button).

Answer 1

Define the buttons as block-level elements. Also, note the use of the correct closing tag (</button>):
button {
display: block;
}
<button>Test</button>
<button>Test</button>
<button>Test</button>

Answer 2

<buttons> are inline-block elements by default. You can change that by styling the display to block instead:
button {
display: block;
}
<button>Test</button>
<button>Test</button>
<button>Test</button>

Answer 3

as they have explained above, buttons element come with inline display property by default. you need to make display: block; to achieve your desired result:
p{
font-family: arial;
font-weight: bold;
}
.button{
background-color: #2a609a;
width: 130px;
height: 60px;
color: white;
outline: none;
font-size: 16px;
border: none;
cursor: pointer;
}
.block-display button{
margin-bottom:5px;
display:block;
}
.button:hover{
background-color: #32CD32;
font-size: 20px;
transition: 0.5s;
}
<div class="default-display">
<p> buttons with defualt display: </p>
</br>
<button class="button">Button 1 </button>
<button class="button">Button 2 </button>
<button class="button">Button 3 </button>
</div>
</br>
<div class="block-display">
<p> buttons with block display: </p>
</br>
<button class="button">Button 1 </button>
<button class="button">Button 2 </button>
<button class="button">Button 3 </button>
</div>

Answer 4

You can do this with your css
button {
display: block;
}