Edit in JSFiddle

function onSaveError() {
      $("#tip").removeClass("error");
      $("#tip").addClass('notification');
   $("#tip p").html("Sorry this bin is too large for us to save");
   $("#tip").css({ display: "block" });
  };

  $("#tip").on("click", ".dismiss", function() {
    $("#tip").css({ display: "none" });
  });
     function onDelete(){
  $("#tip p").html("this file is deleted");
     $("#tip").removeClass("notification");
     $("#tip").addClass('error');
  $("#tip").css({ display: "block" });
  }
<div id="tip">
  <p>
   <label>
    <input type="checkbox" class="enablealt"> 
     <strong>Turn this off</strong>
      You can access this any time in 
   </label>
  </p>
  <a class="dismiss" href="#">Dismiss x</a>
</div>
<input type="submit" value="save" onclick="onSaveError();"/>
<input type="submit" value="delete" onclick="onDelete();"/>
  #tip.error {
   background: #FF4136;
   color: #fff;
 }

 .error a {
   color: #fff;
   text-shadow: none;
 }

 #tip {
   z-index: 100;
   display: none;
   border-top: 1px solid #ccc;
   position: absolute;
   bottom: 0;
   font-size: 14px;
   line-height: 22px;
   background: #fdfece;
   left: 0;
   right: 0;
   padding: 2px 10px 2px 10px;
   -webkit-animation: tip-flash 100ms linear 4 alternate;
   -moz-animation: tip-flash 100ms linear 4 alternate;
   -ms-animation: tip-flash 100ms linear 4 alternate;
   -o-animation: tip-flash 100ms linear 4 alternate;
   animation: tip-flash 100ms linear 4 alternate;

   -webkit-transition: bottom 100ms linear;
   transition: bottom 100ms linear;
 }

 #tip.notification,
 #tip.error {
   bottom: auto;
   top: 34px;
   line-height: 28px;
   box-shadow: 0 2px 4px rgba(0,0,0,.2);
 }

 #tip p {
   margin: 5px 25px 5px 0;
   padding: 0 65px 0 0;
   line-height: 1.3;
 }

 #tip a.dismiss {
   line-height: 28px;
   position: absolute;
   right: 20px;
   top: 2px;
   text-decoration: none;
   text-shadow: none;
 }