Bootstrap Snippet Action Button with Content Box using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="actionBtn" class="action-button">
    <div class="action-button-content">
        <div class="action-button-content-inner">
            <h2>How can we help you?</h2>
            <a class="btn" href="#">Contact Support</a>
            <a class="btn" href="#">Track a Package</a>
            <a class="btn" href="https://gist.github.com/florantara/c7c78e61a619e4444c340962a43fad9c">View in Github</a>
        </div>
    </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
@charset "UTF-8";
.action-button {
  display: block;
  position: fixed;
  width: 4em;
  height: 4em;
  z-index: 10;
  bottom: 1em;
  right: 1em;
  color: #fff;
  background: linear-gradient(135deg, #0cebeb, #20e3b2, #29ffc6);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0.1em 0 0.25em rgba(0, 0, 0, 0.15), 0.2em 0 1em rgba(0, 0, 0, 0.2);
}
.action-button::after {
  content: "⋯";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.action-button-content {
  background-color: white;
  width: 0px;
  height: 0px;
  position: absolute;
  z-index: 15;
  bottom: 2em;
  right: 2em;
  transform-origin: bottom right;
  transition: box-shadow 50ms ease-out, border-radius 50ms ease-out 25ms, width 90ms ease-in, height 60ms ease-in;
}
.action-button-content-inner {
  opacity: 0;
  transition: opacity 30ms ease-out 0;
  padding: 40px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
var actionButton = document.getElementById("actionBtn");
var body = document.getElementsByTagName("body")[0];
function toggleActionButton(){
    if ( body.classList.contains('actionsBoxOpen')) {
        body.classList.remove('actionsBoxOpen');
    } else {
        body.classList.add('actionsBoxOpen');
    }
}
actionButton.addEventListener('click', toggleActionButton );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Action Button with Content Box"
Bootstrap 4.0.0 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Action Button with Content Box" Bootstrap 4.0.0 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Action Button with Content Box"
Bootstrap 4.0.0 Snippet by tieusuquay79