Mostrar y ocultar con botones input

Una forma de Mostrar y ocultar parte de una entrada mediante el uso de botones input .

Lo he visto en esta entrada de Trucos Key donde podéis ver un ejemplo de como funciona con botones input sin personalizar.

Después de probarlo he cambiado algunas cosillas y personalizado el botón mediante CSS.

El procedimiento es muy sencillo, se trata de colocar el código directamente en el editor de entradas de esta manera:

<div class="pre-spoiler">
<span style="float: left; padding-top: 2px;"></span><input id="xs" value="Ver más" style="margin-left: 50px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div class="spoiler" style="display: none;">
COLOCAMOS AQUI LA PARTE A OCULTAR </div>
</div>

Cambios en el código del botón:

margin-left: 50px; La distancia del botón al borde de la entrada desde la izquierda.
width: 80px; Ancho del botón. Si ponéis un texto más largo en el botón, tendréis que aumentar su tamaño aquí.
font-size: 14px; Tamaño de la fuente del texto.
font-family: trebuchet ms; Tipo de fuente del texto.

Si queremos personalizar el botón input para adaptarlo al diseño de nuestro blog, añadiremos unas líneas en el código CSS de la plantilla (las verás pinchando en el botón de ejemplo) antes de ]]></b:skin>

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

Estos son los cambios en el CSS para personalizar el botón:

background: #27707F; Aquí cambiamos el color de fondo del botón.
color: #fff; Aquí cambiamos el color del texto del botón.
border: 2px solid #6EA7B2; Aquí cambiamos el grosor, tipo y color del borde del botón.