Tutorial: POP-UP BOXES (v.1) CSS

Paste the following code under <style type="text/css">:

/*----- POP UP BOX by borntobewildcodes -----*/

/* You can change the placement of this box and set position value to fixed */

#popup_button{
position:fixed;
margin-top:50px;
margin-left:50px;
width:30px;
height:30px;
padding:5px;
background:#fff;
border:1px solid #eee;
border-radius:2px;
text-align:center;
line-height:30px;
overflow:hidden;
z-index:10000;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}

#popup_button span{
font-size:12px;
color:#444;
}

#popup_button:hover span{
color:#000;
}

#open{
position:absolute;
width:30px;
height:30px;
}

#close{
position:absolute;
width:30px;
height:30px;
z-index:10;
display:none;
}

/* Pop-up box */

#popup_box{
position:fixed;
top:50px;
left:100px;
padding:30px 40px;
width:520px;
height:auto;
background:#ffffff;
border:1px solid #eee;
z-index:10000;
overflow:hidden;
display:none;
color:#222222;
font-size:15px;
line-height:25px;
text-align:justify;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}