Bootstrap Snippet Knowledge Base button in Botton Right using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Knowledge Base button in Botton Right"
Bootstrap 3.3.0 Snippet by MrJackw

Related: See More

Questions / Comments:

"Knowledge Base button in Botton Right" Bootstrap 3.3.0 Snippet by MrJackw

Related: See More

Questions / Comments:

"Knowledge Base button in Botton Right"
Bootstrap 3.3.0 Snippet by MrJackw