<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>
@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;
}
.action-button-content-inner h2 {
color: black;
margin: 0 0 1em 0;
padding: 0;
}
.action-button-content-inner .btn {
display: block;
padding: 10px 0;
text-align: center;
color: #0cebeb;
border: 1px solid #0cebeb;
border-radius: 3px;
margin-bottom: 1.5em;
transition: color 50ms linear, background 50ms linear;
text-decoration: none;
}
.action-button-content-inner .btn:hover {
color: white;
background: #0cebeb;
}
.action-button-content-inner::after {
content: "\231F";
position: absolute;
font-size: 25px;
top: 5px;
right: 15px;
color: #666;
pointer-events: auto;
transform: rotate(45deg);
cursor: pointer;
}
.actionsBoxOpen .action-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1.5em;
height: 1.5em;
padding: 0.25em;
transform-origin: 50%;
transform: translate(-50%, -50%);
font-size: 200%;
font-weight: 100;
line-height: 0.95em;
text-align: center;
border-radius: 50%;
transition: all 400ms ease-out;
}
.actionsBoxOpen .action-button-content {
pointer-events: none;
width: 400px;
height: 300px;
cursor: default;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
border-radius: 0;
bottom: 2em;
right: 2em;
transform-origin: bottom right;
transition: box-shadow 50ms ease-in 100ms, border-radius 50ms ease-in 100ms, width 150ms ease-in, height 150ms ease-in;
}
.actionsBoxOpen .action-button-content-inner {
opacity: 1;
transition: opacity 100ms ease-out 200ms;
}
.actionsBoxOpen .action-button-content-inner .btn {
pointer-events: auto;
}
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 );
