CODEWITHSUNDEEP
htmlcss
Arun Sharma
Arun Sharma

Reputation: 35

Moving Button to the right

I have an HTML Page with a CSS. I want to align some buttons to the right. Even though in the normal HTML pages without this CSS template, the button would move to the right, it does not work anymore. Same is the case for similar buttons on the page. Align to the center does not work either.

This is what the page looks like:

enter image description here

input.logout {
  width: 100px;
  padding: 7px;
  cursor: pointer;
  font-weight: bold;
  font-size: 80%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
}

input.logout:hover {
  color: #ffff;
  background: #000;
  border: 1px solid #fff;
}
<form align="right">
  <input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
</form>

Upvotes: 0

Views: 165

Answers (2)

IvanS95
IvanS95

Reputation: 5732

If you are just going to have this .logout button on that line, you can just make it a block-level element with display: block, and add margin-left: auto so it is pushed to the right side; without using floats, since those can cause issues down the line.

input.logout {
  width: 100px;
  padding: 7px;
  cursor: pointer;
  font-weight: bold;
  font-size: 80%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
  display: block;
  margin-left: auto;
}

input.logout:hover {
  color: #ffff;
  background: #000;
  border: 1px solid #fff;
}
<form>
  <input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
</form>

If you are going to have multiple buttons on the same line, maybe Flexbox would be the way to go instead:

.flex {
  display: flex;
  justify-content: flex-end;
}

input.logout {
  width: 100px;
  padding: 7px;
  cursor: pointer;
  font-weight: bold;
  font-size: 80%;
  background: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
  border-radius: 10px;
  margin-left: 5px;
}

input.logout:hover {
  color: #ffff;
  background: #000;
  border: 1px solid #fff;
}
<form>
  <div class="flex">
  <input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
  <input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
  </div>
</form>

Upvotes: 2

pavelbere
pavelbere

Reputation: 970

Just add float:right to your button css

input.logout {
width: 100px;
padding: 7px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
float: right;
}
input.logout:hover {
color: #ffff;
background: #000;
border: 1px solid #fff;
}
<form align="right">
<input class="logout" type="button" value="Logout"onclick="window.location.href='logout.php'" />
</form>

Upvotes: -1

Related Questions