Eu uso esse código para alinhar à direita um botão.

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

Mas as <p>tags desperdiçam algum espaço, portanto, é necessário fazer o mesmo com <span>ou <div>.

Qual técnica de alinhamento usada depende das circunstâncias, mas a básica é float: right;:

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

Você provavelmente desejará limpar seus carros alegóricos, mas isso pode ser feito overflow:hiddenno contêiner pai ou em um explícito<div style="clear: both;"></div> na parte inferior do contêiner.

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

Os elementos flutuantes são removidos do fluxo normal de documentos para que possam exceder o limite dos pais e atrapalhar a altura dos pais. O clear:bothCSS cuida disso (assim como overflow:hidden). Brinque com o exemplo do JSFiddle que eu adicionei para ver como se comportam a flutuação e a limpeza (você vai querer largar o overflow:hiddenprimeiro).

Outra possibilidade é usar um posicionamento absoluto orientado à direita:

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

Aqui está um exemplo: https://jsfiddle.net/a2Ld1xse/

Essa solução tem suas desvantagens, mas há casos de uso em que é muito útil.

Se o botão for o único elementno 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>

Se houver outro elements no 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>

Com 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>

Boa sorte...

Esta solução depende do Bootstrap 3, como apontado por @ günther-jena

Tente <a class="btn text-right">Call to Action</a>. Dessa forma, você não precisa de marcação ou regras extras para limpar os elementos flutuantes.

uma abordagem moderna em 2019 usando flex-box

com tag div

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

com tag span

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

Outra possibilidade é usar um posicionamento absoluto orientado para a direita. Você pode fazer assim:

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

Nem sempre é tão simples e, às vezes, o alinhamento deve ser definido no contêiner e não no próprio elemento Button!

Para o seu caso, a solução seria

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

Tomei o cuidado de especificar width=100%para ter certeza de que <div>ocupa toda a largura de seu contêiner.

Eu também adicionei padding:0para evitar o espaço antes e depois, como acontece com<p> elemento.

Posso dizer que, se <div>definido no rodapé da tabela FSF / Primefaces, o float:rightnão funciona corretamente porque a altura do botão se tornará maior que a altura do rodapé!

Nesta situação Primefaces, a única solução aceitável é usar text-align:rightno contêiner.

Com esta solução, se você tiver 6 botões para alinhar à direita, deverá especificar apenas esse alinhamento no contêiner :-)

<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 manter o botão no fluxo da página:

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

(coloque esse estilo em um arquivo .css, não use este html embutido, para melhor manutenção)

Isso resolveria isso.

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

Boa sorte com o seu código!

No meu caso, o

<p align="right"/>

funcionou bem

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