title: How to prevent button moving when clicked?
body: <p>I have this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;head&gt;
  &lt;script&gt;
  
  
  function Show(element){
  element.style.display = "block";
  }
  
  
  function Hide(element){
  element.style.display = "none";
  }
  
  
  function Slide(){
  
  try{
  
  img1 = img1id.style.display;
  img2 = img2id.style.display;
  img3 = img3id.style.display;
  
  if(img1 =="none" &amp;&amp; img2=="none"){
  Show(img1id);
  Hide(img3id);
  }
  
  else if(img2 == "block" &amp;&amp; img1=="none"){
  Hide(img2id)
  Show(img3id);
  }
  
  else if(img3 == "block" &amp;&amp; img1 == "none" &amp;&amp; img2 == "none"){
  Show(img1id);
  Hide(img3id); 
  }
  
  else {
  Hide(img1id);
  Hide(img3id);
  Show(img2id);
  }
  
  }
  
  catch(e){
  alert("Evento " + e);
  
  }
  
  }
  
  
  var img1id;
  var img2id;
  var img3id;
  var buttonid;
  
  
  function gestoreLoad(){
  try{
  
  img1id = document.getElementById("id1");
  img2id = document.getElementById("id2");
  img3id = document.getElementById("id3");
  buttonid = document.getElementById("id4");
  buttonid.onclick = Slide;
  
  }
  catch(e) {
  alert("gestoreLoad " + e);
  }
  }
  
  window.onload = gestoreLoad;
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  
  button:active {
    padding: 0px;
  }
  
  button#id4 {
   margin: auto auto auto auto;
   font-weight: bold;
   height: 80px;
   width: 150px;
   background-color: #000;
   color: #FFF;
   border-radius: 20px 20px 20px 20px;
   font-size: 1.5em;
  }
  
  
  img {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera &gt; 12.1 */
         -moz-animation: fadein 2s; /* Firefox &lt; 16 */
          -ms-animation: fadein 2s; /* Internet Explorer */
           -o-animation: fadein 2s; /* Opera &lt; 12.1 */
              animation: fadein 2s;
  }
  
  @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  /* Firefox &lt; 16 */
  @-moz-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  /* Safari, Chrome and Opera &gt; 12.1 */
  @-webkit-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  /* Internet Explorer */
  @-ms-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  
  /* Opera &lt; 12.1 */
  @-o-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;center&gt;
  &lt;img id="id1" style="width:800px; height:400px;" src="https://image.shutterstock.com/image-photo/beatiful-nature-lake-forest-pang-260nw-1039096585.jpg" /&gt;
  &lt;img id="id2" style="display:none; width:800px; height:400px;" src="https://thumbs.dreamstime.com/b/fragment-traditional-iranian-architecture-against-beatiful-purple-sky-yellow-pink-clouds-beautiful-sunset-iranian-122642415.jpg" /&gt;
  &lt;img id="id3" style="display:none; width:800px; height:400px;" src="https://live.staticflickr.com/5808/21804482933_2b1279ef62_b.jpg" /&gt;
  &lt;/center&gt;
  
  &lt;br /&gt;
  &lt;center&gt;
  &lt;button id="id4" /&gt;&lt;span&gt;Slideshow!&lt;/span&gt;&lt;/button&gt;
  &lt;/center&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I take some images from internet for the example.
  Btw when I click for the first time on the button (so after page's load), it moves up...Do you know any solutions?  </p>
  
  <p>P.s I know in W3chools there are the codes for slideshow which work perfectly, but I would try by myself and to learn more about JavaScript for fun </p>