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

<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 );

Related: See More


Questions / Comments: