<div class="chat_box" id="chat">
<div class="chatheader" onclick='showhidechat()'>Chat Room Anak Sembada
</div>
<div class="pesan_chat">
<p>Hai! Sahabat sembada bisa chat bareng di sini dengan Messenger,
<br/> Terima kasih.</p>
<a href="javascript: void(0)" onclick="popup('https://m.me/sembadakost');showhidechat()" title="Chat on Messenger">
<span class="chat_button">Chat on Messenger</span></a>
</div>
</div>
.chat_box {
background: #fff;
width: 250px;
height: 160px;
position: fixed;
bottom: -125px;
right: 60px;
transition: all .3s;
border: 1px solid transparent;
border-radius: 3px 3px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
overflow: hidden;
z-index:1000000;
}
.pesan_chat {
text-align: center;
text-decoration: none;
display: block;
height: 100%;
padding: 5px 5px 15px;
}
.chat_button {
background: #4d90fe;
border: 0;
margin: 0 auto;
padding: 5px 18px;
font-size: 18px;
font-weight: 700;
color: #fff;
text-align: center;
display: inline-block;
border-radius: 3px;
transition: all .3s;
text-decoration: none;
}
.chat_button:hover {
background: #365899;
}
.chatheader {
margin: 0 auto;
padding: 0 10px;
height: 35px;
line-height: 35px;
font-size: 18px;
font-weight: 700;
color: #616161;
text-align: center;
display: block;
cursor: pointer;
}
.pesan_chat p {
color: #616161;
font-size: 16px;
margin: 10px;
}
function showhidechat(){var o=document.getElementById("chat");"0px"!==o.style.bottom?o.style.bottom="0px":o.style.bottom="-125px"}function popup(o){var t=650,n=400,e=(screen.width-t)/2,i=(screen.height-n)/2,s="width="+t+", height="+n;return s+=", top="+i+", left="+e,s+=", directories=no",s+=", location=no",s+=", menubar=no",s+=", resizable=no",s+=", scrollbars=no",s+=", status=no",s+=", toolbar=no",newwin=window.open(o,"windowname5",s),window.focus&&newwin.focus(),!1};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.