How to Right Align a Button with CSS

In this snippet, you can find various examples of right aligning a button by using the following CSS properties: float, text-align, and justify-content. Below, we'll demonstrate solutions with each of them.

Solution with the CSS float property

Use the CSS float property with the “right” value to right align a button. The alignment technique you use depends on the situation, but here, it’s important to use the float property.

Example of aligning a button to the right with the CSS float property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        overflow: hidden;
        border: 1px solid #ff1100;
        clear: both;
      }
      p {
        margin-bottom: 10px;
      }
      input.right {
        float: right;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
      <p>
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <input type="button" value="Click here" class="right">
    </div>
  </body>
</html>

Solution with the CSS text-align property

It is also possible to align the <button> element to the right by using the CSS text-align property.

In the example below, we set the text-align to "right" for the <div> element and use the "left" value of the same property for the <p> element.

Example of aligning a button to the right with the CSS text-align property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        border: 1px solid #ff1100;
        text-align: right;
      }
      p {
        margin-bottom: 10px;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
      <p>
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <button type="button">Button</button>
    </div>
  </body>
</html>

If you want to move the button to the right, you can also place the button within a <div> element and add the text-align property with its "right" value to the "align-right" class of the <div>.

Example of aligning a button to the right with the "right" value of the text-align property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        border: 1px solid green;
      }
      p {
        margin-bottom: 10px;
      }
      .align-right {
        text-align: right;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
      <p>
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <div class="align-right">
        <button type="button">Button</button>
      </div>
    </div>
  </body>
</html>

Solution with the CSS justify-content property

In our example below, we set the display to "flex" and add the justify-content property with the "flex-end" value to the class of our <div> element.

Example of aligning a button to the right with the "flex-end" value of the justify-content property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 250px;
        border: 1px solid pink;
      }
      p {
        margin-bottom: 20px;
      }
      .flex-end {
        background-color: pink;
        padding: 10px 0;
        display: flex;
        justify-content: flex-end;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Flexbox is a single dimensional layout, which means that it lays items in one dimension at a time, either as a row, or as a column, but not both together. This can be opposed to the two-dimensional model - CSS Grid Layout, which lays the items in two dimensions simultaneously (rows and columns together).
      </p>
      <p>
        In HTML, the default values of the display property are taken from the behaviors which are described in the HTML specifications or from the browser or user default stylesheet.
      </p>
      <div class="flex-end">
        <button type="button">Button</button>
      </div>
    </div>
  </body>
</html>