[SOLUCIONADO] Reemplazar boton por texto

[16lolitas]

Buenas!!!
Me acabo de registrar y tengo una pregunta para hacerles.

Quiero hacer un boton que al hacer click sobre el mismo aparezca un texto pero al mismo tiempo ocultar ese boton que dice "click aca" (imagen que puse más abajo), algo parecido al spoiler pero cuando se usa spoiler sigue quedando el "mostrar/ocultar" y lo que quiero es algo como esto:

(algo importante que olvidaba mencionar, busco hacerlo solo con html y css, no quiero usar javascript ni jquery



pasar a esto

[AngelKrak]

ahi te lo hice lo mas parecido que pude amigo ;)

Código HTML:

<div class="exp">
  <input type="checkbox" name="checkbox" id="click">
  <label for="click"><span class="click">Click Aca</span> <span class="mas">
    Texto Texto Texto Texto Texto Texto Texto
    Texto Texto Texto Texto Texto Texto Texto
    </span></label>
</div>
 

Código CSS:

body {
  background: #697397;
  margin: 0;
  padding: 0;
}
 
.exp {
  margin: 220px auto;
  min-width: 300px;
  max-width: 780px;
  position: relative;
}
 
.exp label {
  font-size: 2em;
  font-family: verdana;
  color: #B7BECE;
  text-align: center;
  display: block;
}
.exp label span {
  border: 7px solid #B7BECE;
  padding: 15px 30px 15px 30px;
}
.exp label .mas {
  display: none;
}
 
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + label span {
  border: 7px solid #fff;
  color: #fff;
}
input[type="checkbox"]:checked + label .mas {
  display: block;
}
 
input[type="checkbox"]:checked + label .click {
  display: none;
}
 

Demo:
http://codepen.io/AngelKrak/pen/vNxEar

[16lolitas]

Buenisimo!!!, muchas gracias, estoy viendo como centrarlo porque me aparece la barra de scroll abajo.
Edit no edit porque olvide mandar el comentario :P : ya logre solucionar el tema del scroll, pero no consigo hacer que al hacer click quede centrado como en la imagen que subi, se me va el recuadro con el texto unos pixeles más abajo
otro edit falso :P
Ya logre hacer que quede todo perfecto solo tuve que agregarle un margin-top negativo al que mostraba los "texto texto texto", lo unico que no se es como agregarle es transition para que no aparezca tan de golpe el texto al hacer click.