<button onclick="showMessage(Math.random())">toast</button>
.messageInfo{ position: absolute; bottom: 30px; left: 0; right: 0; text-align: center;  font-size: 30px; color: #fff; transition: .3s; transform: translateY(-100%); opacity: 0; }
.messageInfo span{ display: inline-block; background: #333; border-radius: 30px; padding: 10px 30px;}
.show{ opacity: 1; visibility:visible; transform: translateY(0);z-index: 9;}
function showMessage(txt){
    this.timer && clearTimeout(this.timer);
    var oDiv = document.getElementById('messageInfo');
    if(!oDiv){
      oDiv = document.createElement('div');
      oDiv.className = 'messageInfo';
      oDiv.id = 'messageInfo';
      document.body.appendChild(oDiv);
    }
    oDiv.innerHTML = '<span>'+txt+'</span>';
    setTimeout(function(){
      oDiv.classList.add('show');
    },50)
    this.timer = 
      setTimeout(function(){
      oDiv.classList.remove('show');
    },2000)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.