Yo uso este código para alinear a la derecha un botón.

<p align="right">
  <input type="button" value="Click Me" />
</p>

Pero las <p>etiquetas desperdician algo de espacio, por lo que buscan hacer lo mismo con <span>o <div>.

La técnica de alineación que use dependerá de sus circunstancias, pero la básica es float: right;:

<input type="button" value="Click Me" style="float: right;">

Sin embargo, es probable que desee borrar sus flotadores, pero eso se puede hacer overflow:hiddenen el contenedor principal o de forma explícita <div style="clear: both;"></div>en la parte inferior del contenedor.

Por ejemplo: http://jsfiddle.net/ambiguous/8UvVg/

Los elementos flotantes se eliminan del flujo de documentos normal para que puedan desbordar los límites de sus padres y alterar la altura de los padres, el clear:bothCSS se encarga de eso (al igual que overflow:hidden). Juegue con el ejemplo de JSFiddle que agregué para ver cómo se comportan la flotación y el vaciado ( overflow:hiddenaunque querrá soltar el primero).

Otra posibilidad es utilizar un posicionamiento absoluto orientado a la derecha:

<input type="button" value="Click Me" style="position: absolute; right: 0;">

Aquí hay un ejemplo: https://jsfiddle.net/a2Ld1xse/

Esta solución tiene sus desventajas, pero hay casos de uso en los que es muy útil.

Si el botón es el único elementen block:

.border {
  border: 2px blue dashed;
}

.mr-0 {
  margin-right: 0;
}
.ml-auto {
  margin-left:auto;
}
.d-block {
  display:block;
}

<p class="border">
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>

Si hay otros elements en el block:

.border {
  border: 2px indigo dashed;
}

.d-table {
  display:table;
}

.d-table-cell {
  display:table-cell;
}

.w-100 {
  width: 100%;
}

.tar {
  text-align: right;
}

<div class="border d-table w-100">
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
  <div class="d-table-cell tar">
    <button >The Button</button>
  </div>
</div>

Con flex-box:

.flex-box {
  display:flex;
  justify-content:space-between;
  outline: 2px dashed blue;
}

.flex-box-2 {
  display:flex;
  justify-content: flex-end;
  outline: 2px deeppink dashed;
}

<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>

<h1>Only Button</h1>
<div class="flex-box-2">
  <button>The Button</button>
</div>

<h1>Multiple Buttons</h1>
<div class="flex-box-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Buena suerte...

Esta solución depende de Bootstrap 3, como lo señaló @ günther-jena

Tratar <a class="btn text-right">Call to Action</a>. De esta manera, no necesita marcas ni reglas adicionales para limpiar elementos flotantes.

Un enfoque moderno en 2019 utilizando flex-box

con etiqueta div

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

con etiqueta span

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

Otra posibilidad es utilizar un posicionamiento absoluto orientado a la derecha. Puedes hacerlo de esta manera:

style="position: absolute; right: 0;"

¡No siempre es tan simple y, a veces, la alineación debe definirse en el contenedor y no en el elemento Button!

Para su caso, la solución sería

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

Me he ocupado de especificar width=100%para asegurarme de que <div>ocupa todo el ancho de su contenedor.

También he agregado padding:0para evitar antes y después del espacio como con<p> element.

¡Puedo decir que si <div>se define en el pie de página de una tabla FSF / Primefaces, float:rightno funcionará correctamente porque la altura del Botón será más alta que la altura del pie de página!

En esta situación de Primefaces, la única solución aceptable es usar text-align:righten un contenedor.

Con esta solución, si tiene 6 botones para alinear a la derecha, solo debe especificar esta alineación en el contenedor :-)

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>

Para mantener el botón en el flujo de la página:

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

(ponga ese estilo en un archivo .css, no use este html en línea, para un mejor mantenimiento)

Esto lo resolvería.

<input type="button" value="Text Here..." style="float: right;">

¡Buena suerte con tu código!

En mi caso el

<p align="right"/>

funcionó bien

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>