Thêm khung chat box style Facebook bằng CSS3

Giới thiệu

Bài viết này mình sẽ hướng dẫn anh em thêm khung đóng mở nằm phía dưới bên phải màn hình với style của chat box Facebook hiện tại đơn thuần chỉ sử dụng CSS3, hoàn toàn không có Javascript nên rất nhẹ nhàng và mượt mà
Demo ở ngay bài viết này nha

Hướng Dẫn

CSS

.chat-box {
    font-family: inherit;
    color: #333;
    width: 300px;
    border-bottom: none;
    background-color: white;
    position: fixed;
    right: 10px;
    bottom: 0;
    z-index: 9999;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.chat-box > input[type="checkbox"] {
    display: block;
    margin: 0 0;
    padding: 0 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 26px;
    z-index: 4;
    cursor: pointer;
    opacity: 0;
    border-radius: 8px 8px 0 0;
}

.chat-box > label {
  display:block;
  height:24px;
  line-height:24px;
  background-color:#fff;
  color:#000;
  font-weight:bold;
  padding: 8px 4px 7px 8px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
}

.chat-box > label:before {content:attr(data-collapsed)}

.chat-box .chat-box-content {
  /* padding:10px; */
  display:none;
}

/* hover state */
.chat-box > input[type="checkbox"]:hover + label {background-color:#eee}

/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#fff}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}

HTML

<div class="chat-box">
<input type="checkbox"><label data-expanded="Đóng Chatbox" data-collapsed="Mở Chatbox"></label><div class="chat-box-content">

Nội dung khung chat

</div>
</div>

Anh em có thể tùy chỉnh nội dung theo ý mình, ở bài viết này demo của mình là 1 ví dụ. Đừng quên để lại góp ý, cảm ơn! ./.