Circuito Rede Cerebral: Botão de ocultar/exibir textos

Se você está procurando um botão de "Leia mais..." ou "Continue lendo..." que possa exibir e ocultar certa parte da sua postagem, pois bem, você encontrou!
Os códigos abaixo são referentes ao botão.

Parte CSS (Template)

#xs{
background: #27707F;
color: #fff;
padding: 1px;
margin: 0px 0px 0px 3px;
border: 2px solid #6EA7B2;
}

Os códigos CSS do botão podem ser alterados:

background refere-se à cor de fundo. Veja outras cores...
color refere-se à cor da fonte (letra). Veja outras cores...
padding refere-se ao espaçamente entre a borda com as letras dentro do botão.
margin refere-se à margim do botão na postagem.
border refere-se à borda do botão.

Você também pode adicionar ou remover partes desse código.

background pode se substituido por background-image:

background-image: url(http://.../);
width:50px;
heigth:15px;

http://.../ refere-se oa endereço da imagem desejada.
width refere-se à largura do botão/imagem.
heigth refere-se a altura de botão/imagem.

Parte HTML (Postagem)

Resumo
<div class="pre-spoiler">
<span style="FLOAT: left;
PADDING-TOP: 2px"></span><input style="PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px; WIDTH: 80px; PADDING-RIGHT: 0px; MARGIN-LEFT: 50px;
PADDING-TOP: 0px" id="xs" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= '';this.innerText = ''; this.value = 'Ocultar'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.value = 'Leia Mais';}" value="Leia Mais" type="button">
</div>
<div>
<div style="DISPLAY: none"
class="spoiler">
Coloque aqui o texto a ocultar
</div>
</div>