<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="kb_widget"> <div id="kb_widget_content" class="collapse"> <button type="button" data-toggle="collapse" data-target="#kb_widget_content" class="close" style="position:absolute; top: 13px; right: 13px;"><i class="fa fa-times"></i></button> <!-- Put here your help Content! --> </div> <div id="kb_widget_button"> <button data-toggle="collapse" data-target="#kb_widget_content"> <img class="hostinger-dragon" src="https://freeiconshop.com/wp-content/uploads/edd/book-open-flat.png" alt="How can we help?"> You need help? </button> </div> </div>

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); #kb_widget { position: fixed; bottom: 30px; right: 30px; border: 1px solid #eeeeee; z-index: 1000; } #kb_widget #kb_widget_content { float: right; width: 350px; height: 340px; right: -5px; bottom: -20px; position: absolute; border: 1px solid #e8e8e8; background-color: white; padding: 8px; -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.28); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.28); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.28); overflow: hidden; z-index: 999; } div #kb_widget_button button { background: linear-gradient(to right, #49c593, #009ece); color: #fff; border: 0; font-size: 22px; padding: 8px 25px 8px 65px; position: relative; font-weight: 600; filter: drop-shadow(2px 2px 3px rgba(0,0,0, 0.28)); -webkit-filter: drop-shadow(2px 2px 3px rgba(0,0,0, 0.28)); border-radius: 3px!important; } div #kb_widget_button button img { position: absolute; left: -35px; top: -16.58px; height: 80px; }