CODEWITHSUNDEEP
htmlcss
Oscar Arranz
Oscar Arranz

Reputation: 714

Stack buttons vertically

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).

Upvotes: 10

Views: 40130

Answers (4)

Hassan Zia
Hassan Zia

Reputation: 330

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>

Upvotes: 4

BenM
BenM

Reputation: 53198

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>

Upvotes: 21

Oke Tega
Oke Tega

Reputation: 883

You can do this with your css

button {
    display: block;
}

Upvotes: 2

j08691
j08691

Reputation: 207901

<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>

Upvotes: 5

Related Questions