CSS-ohjeet:

  .infoviive {
    background-color: rgb(223, 235, 236);
    width: 40%;
    border: 1px solid rgb(67, 110, 112);
    padding: 15px;
    margin: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
  }
  .button {
    background-color: rgb(92, 46, 184);
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.7s;
  }
  .button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
 

 <button onclick="avaaInfo()" class="button button1"> Näytä </button>
 
 <div id="viivekikka"> </div>
 <script>
  function avaaInfo() {
  var teksti = "<div class='infoviive'> Tämä ruutu näkyy Näytä-painikkeen klikkauksella noin 5 sekunttia ja poistuu näkyvistä. </div>";
  document.getElementById("viivekikka").innerHTML = teksti;
 
  setTimeout(function () {
    document.getElementById("viivekikka").innerHTML = "";
  }, 5000);
  }
 </script>
  

Poistamalla koodauksesta painike ja avaaInfo-funktio sulkumerkkeineen, voi koodauksen sijoittaa haluamaansa kohtaan www-sivun koodausta