this is another with whatever content you want, including links or images
This would be the HTML:
<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>
Posted by
SYED SAAD
