CODEWITHSUNDEEP
htmlcss
Tashi Tamu
Tashi Tamu

Reputation: 139

How to create two HTML buttons side by side

This is a snippet of code for two buttons. I want them to be side by side but currently, one button is on top of other. as you can see

Buttons on top of each other I want it to look like this

HTML

    <div class="buttons">

            <div class="action_btn">

            <button name="submit" class="action_btn submit" type="submit" value="Save" onclick="myFunction()">Save</button>
            <button name="submit" class="action_btn cancel" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button>

            <p id="saved"></p>

            </div>

        </div>

CSS

    .buttons {
width: 960px;
margin: 0 auto;}

    .action_btn {
width: 500px;
margin: 0 auto;}

Upvotes: 10

Views: 133859

Answers (7)

kesava reddy
kesava reddy

Reputation: 91

  .buttons {
width: 200px;
margin: 0 auto;
display: inline;}

    .action_btn {
width: 200px;
margin: 0 auto;
display: inline;}
<div class="buttons">

            <div class="action_btn">

            <button name="submit" class="action_btn submit" type="submit" value="Save" onclick="myFunction()">Save</button>
            <button name="submit" class="action_btn cancel" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button>

            <p id="saved"></p>

            </div>

        </div>

Upvotes: 9

Hamid Javadi
Hamid Javadi

Reputation: 211

One problem is that class action_btn is used for div and button and it interferes. Also in your code, div that has action_btn class look like extra and needs to be deleted. Considering the above, your code will be converted as follows.

.buttons {
  width: 960px;
  margin: 0 auto;
}

.action_btn {
  display: inline-block;
  width: calc(50% - 4px);
  margin: 0 auto;
}
<div class="buttons">
		<button name="submit" class="action_btn submit" type="submit" value="Save" onclick="myFunction()">Save</button>
		<button name="submit" class="action_btn cancel" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button>
		<p id="saved"></p>
</div>

Upvotes: 3

Void Spirit
Void Spirit

Reputation: 909

Use float

<div>
  <div>
    <button name="submit" type="submit" value="Save" onclick="myFunction()" class="button">Save</button>
    <button name="submit" type="submit" value="Cancel" onclick="myFunction2()" class="button">Cancel</button>
    <p id="saved"></p>
  </div>
</div>

And

.button{
    float:left;
    margin:2px;
 }

Upvotes: 1

dairinjan
dairinjan

Reputation: 83

.btn{display: inline-block; margin-right: 20px;}

use this in css using the class or id of your button.

this means that you want the buttons to be side by side

Upvotes: 3

Mahmod Abu Jehad
Mahmod Abu Jehad

Reputation: 177

.form-control {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  
.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
}

/* additions */
.btn-inline {
  height: 34px;
  border-radius: 0 4px 4px 0;
  margin-left: -10px;
}

.form-control { 
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding-left: 10px;
}

.form-control:focus { 
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
<form class="form-inline">
  <button class="btn btn-primary btn-inline">Update</button>
  <button class="btn btn-primary btn-inline">Update</button>
</form>

Upvotes: 0

vsync
vsync

Reputation: 130810

Change this:

.buttons {
  width: 960px;
  margin: 0 auto;
}

.action_btn {
  width: 500px;
  margin: 0 auto;
}

To this:

.buttons {
  width: auto;
}

.action_btn {
  width: auto;
}

Or simply delete those CSS rules altogether.

I have no idea why did you give such large numbers for the buttons' widths but the effect is that both buttons are too wide to fit side-by-side

Upvotes: 1

Spencer Phillips
Spencer Phillips

Reputation: 49

You want the buttons themselves to have inline-block in the css. Like this

    button.action_btn{display: inline-block;}

Once you have that, add some padding and/or margins to separate them.

Upvotes: -1

Related Questions