<input onClick="notifyBar()" type="button" value="click me">
@import "bourbon";

body { background-color: lightSlateGray}
input[type="button"] {
  display: block;
  margin: 200px auto 0 auto;
  border-radius: 10px;
  padding: 10px;
  box-shadow: none;
  border:none;
  background-color: deepSkyBlue;
  color: azure;
  &:active, &:hover, &:focus {outline:0;}
}

.alert-box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100%;
  font-weight: normal;
  margin-bottom: 1.25rem;
  position: absolute;
  top: 0;
  padding: 0.875rem 1.5rem 0.875rem 0.875rem;
  font-size: 0.8125rem;
  background-color: #008cba;
  border-color: #0078a0;
  color: white;
  box-shadow: 0px 1px 5px 0 darkslategrey;
}
.alert-box.success {
  background-color: #43ac6a;
  border-color: #3a945b;
  color: white;
  text-align: center;
  font-size: 20px;
}
View Compiled
function notifyBar() {
  if(! $('.alert-box').length) {
    $('<div class="alert-box success" >Message successfully send!</div>').prependTo('body').delay(5000).fadeOut(1000, function() {
            $('.alert-box').remove();
            });
  };
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js