PURE CSS STICKY POPUP

EXAMPLE: https://rightclickerstesting.co.za/rcm1louise/wilcaro/about-us/

 

THE HTML

 

<div id=”slideout”>
<h3>CONTACT US</h3>
<div id=”slideout_inner”>
INFO OR CONTACT FORM
</div>
</div>

 

THE CSS

/*—————————————————STICKY CONTACT*/

#slideout {
position: fixed;
font-weight:bold;
border:2px solid #f3f3f3;
bottom: 0;
right: 10px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background-color:#000;

}

#slideout h3 {color:#fff;}

#slideout_inner {
position: fixed;
padding:10px;
background-color:#f3f3f3;
bottom: -390px;
width:400px;
right: 10px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout:hover {
bottom: 395px;
}
#slideout:hover #slideout_inner {
bottom: 0;
}

 

@media (max-width:600px) {

#slideout_inner {

height:50%;
overflow:scroll;
width:85%;
right: 10px;
bottom:-320px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

#slideout:hover {
bottom: 320px;
}

}

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *