<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="container"> <div class="center"> <div class="text-center"> <div class="form-group"> <h1 class="Header">Popup Notification</h1> </div> <div class="form-group"> <button class="btn btn-default" id="show-notification" type="button" name="button">Click Me</button> </div> </div> </div> <div class="notification"> <span></span> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap'); :root { font-family: 'Roboto', sans-serif; } * { margin: 0; padding: 0; } .center { justify-content: center; align-items: center; height: 100vh; display: flex; } .center h1 { margin: 0; } .Header { font-weight: 700; } .btn-default { outline: none; background-color: #1C2833; color: #F2F3F4; border: 0; height: 50px; padding: 0 50px; } .btn-default:hover { outline: none; background-color: #17202A; color: #F2F3F4; } .btn-default:active { outline: none; background-color: #17202A; color: #F2F3F4; } .btn-default:focus { outline: none; background-color: #17202A; color: #F2F3F4; } .btn-default:active:focus { outline: none; background-color: #17202A; color: #F2F3F4; } .notification { cursor: pointer; display: none; z-index: 100; margin: 50px; position: absolute; bottom: 0; right: 0; } .notification span { background-color: #28B463; padding: 10px 20px; border-radius: 50px; color: #F2F3F4; font-size: 12px; font-weight: 100 !important; }

$(document).ready(function() { $('#show-notification').on('click', function() { $('.notification').fadeIn(200); setTimeout(function() { $('.notification').show(); $('span').text("Hey, please hit the subscribe button!"); }); }); $('.notification').on('click', function() { $('.notification').fadeOut(200); setTimeout(function() { $('.notification').hide(); }); }); });