show this is another with whatever content you want, including links or images

<input id="popup" type="checkbox"  class="popUpControl">
class="elboton" <label for="popup">
  <span class="click"> show </ span>
  <span class="hiddenbox">
    .......
  </ Span>
</ Label>

<style>
  / * LABEL label * /
  . Elboton {
    background-color: # AAA;
    border-radius: 10px;
    box-shadow: 0 0 10px # 222 inset;
    color: # FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 5px 15px;
    position: relative;
    text-shadow: 1px 1px 1px # 000;
  }
  / * In a post Blogger. hidden internal line breaks to keep my sanity * /
  . Elboton br {display: none;}
  / * The container with what we want to show * /
  . Hiddenbox {
    background-color: # FFF;
    border-radius: 10px;
    box-shadow: 0 0 15px # 000 inset;
    left: 0;
    line-height: 0;
    margin: 25px 0;
    opacity: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 100%;
    z-index: 100;
    -Moz-transform-origin: 0 0;
    -Webkit-transform-origin: 0 0;
    -O-transform-origin: 0 0;
    -Ms-transform-origin: 0 0;
    -Moz-transform: scale (0);
    -Webkit-transform: scale (0);
    -O-transform: scale (0);
    -Ms-transform: scale (0);
    -Moz-transition: all 1s;
    -Webkit-transition: all 1s;
    -O-transition: all 1s;
    -Ms-transition: all 1s;
  }
  / * Displays the contents hidden * /
  . PopUpControl: checked ~ label>. Hiddenbox {
    opacity: 1;
    -Moz-transform: scale (1);
    -Webkit-transform: scale (1);
    -O-transform: scale (1);
    -Ms-transform: scale (1);
  }
  / * The CHECKBOX we keep hidden forever * /
  . PopUpControl {display: none;}
  / * Change the text of pseudo-button * /
  . PopUpControl: checked ~ label> span.click {display: none;}
  . PopUpControl: checked ~ label: before {content: "hide";}
</ Style>