CODEWITHSUNDEEP
htmlcssbutton
flash
flash

Reputation: 1519

line break between buttons in css/html

I have a screenshot as shown below which I have to replicate in CSS/HTML.

enter image description here

I have created the fiddle for the above screenshot. At this moment, buttons are align in a straight line.

The HTML/CSS codes which I have used in order to make the buttons are:

HTML:

<div class="buttons">
   <button class="add-winner">Add Winder</button>
   <button class="save">Save</button>
   <a href="https://www.w3schools.com">Cancel</a>
</div>

CSS:

.login-page .form .login-form .add-winner {
    border: 1px solid #1173B7;
    background-color: white;
    color: #1173B7;
    font-size: 14px;
    width: 25%;
    font-weight: bold;
    font-family: "Open Sans";
    outline: 0;
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}
.login-page .form .login-form .save {
    background-color: #C4C4C4;
    border: 1px;
    color: white;
    font-size: 14px;
    width: 35%;
    font-weight: bold;
    font-family: "Open Sans";
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}

Problem Statement:

I am wondering, what changes I should make the in HTML/CSS codes above or in the fiddle so that there is a line break between the button as present in the screenshot.

Upvotes: 0

Views: 12673

Answers (3)

Cory Kleiser
Cory Kleiser

Reputation: 2024

There are a few ways you could do this. The dirty way would be to add <br> to add a line break like this (for best practice, read on):

<div class="buttons">
   <button class="add-winner">Add Winder</button>
   <br>
   <button class="save">Save</button>
   <br>
   <a href="https://www.w3schools.com">Cancel</a>
</div>

You could also wrap your buttons in any block level elements, like this:

<div class="buttons">
   <div>
      <button class="add-winner">Add Winder</button>
   </div>
   <div>
      <button class="save">Save</button>
   </div>
   <div>
      <a href="https://www.w3schools.com">Cancel</a>
   </div>
</div>

That would get the job done as well. However the easiest and most efficient way, IMO, would be to set the button's display: block; in the css. Here is a code snippet (with your styles included) using display: block; which would be the preferred method:

.form {
  background: #FFFFFF;
  width: 500px;
  height: 500px;
  margin: 0 auto 100px;
  box-sizing: content-box;
  padding: 50px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #FFFFFF;
  width: 100%;
  border: 1px solid #979797;
  border-radius: 5px;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.form input:focus {
  background-color: #C4C4C4;
}

.login-page .form .login-form a {
  color: #676767;
  text-decoration: none;
}

.login-page .form .login-form .add-winner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  left: 40%;
  display: block;
  border: 3px solid #1173B7;
  background-color: white;
  color: #1173B7;
  font-size: 14px;
  width: 25%;
  font-weight: bold;
  font-family: "Open Sans";
  outline: 0;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer;
  margin-bottom: 6%;
}

.login-page .form .login-form .save {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: #C4C4C4;
  border: 1px;
  color: white;
  font-size: 14px;
  width: 35%;
  font-weight: bold;
  font-family: "Open Sans";
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  margin-bottom: 6%;
}
<div class="login-page">
  <div class="form">
    <form class="login-form">
      <div class="buttons container-fluid">
        <button class="add-winner">Add Winder</button>
        <button class="save">Save</button>
        <a href="https://www.w3schools.com">Cancel</a>
      </div>
    </form>
  </div>
</div>

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://use.fontawesome.com/991ea8a605.js"></script>

As for the styles for your specific situation. You can also add this style to get the Add Winner button to line it up on the right side like the screenshot

.add-winner{
  position:relative;
  left:40%;
}

And as far as the bottom white you can override that by adding this style to your css:

html{
  background-color: #BFBFBF;
}

The reason you had the white space at the bottom is you set the background-color on your .login-page class which stopped short of the bottom of the page.

Upvotes: 2

mooga
mooga

Reputation: 3317

you can instead for better HTML structure use a list

like 

ul {
list-style: none;

}
li {
margin: auto;
text-align: center;
margin: 1rem;
}
<ul class="buttons">
   <li><button class="add-winner">Add Winder</button></li>
   <li><button class="save">Save</button></li>
   <li><a href="https://www.w3schools.com">Cancel</a></li>
</ul>

Upvotes: 1

Pasindu
Pasindu

Reputation: 340

use two divs. one for the add winner button and other one to the cancel and save button.then you can align each button easily.as well as use ( br ) tag to get a new line

Upvotes: 1

Related Questions