Register button opens alone

I'm having a problem, when I enter my site, my registration button opens automatically, I wanted to take this functionality out, but I'm not able to do it and when I click on the login button if the register button is open, behind. It was supposed to disappear when you click on the log in button. Here is my code below:

Html:

<!---- Botão do iniciar sessão--->
<button class="login"  onclick="document.getElementById('id01').style.display='block'"  style="border:2px solid black; width:auto; border-radius:10%;" >
   <i class="fa fa-user">Iniciar Sessão</i>
</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="indexlogin.php"   method="post" >
   <div class="container">
      <input  id="field"type="text" name="email"style="border:1px solid black; width:auto;" placeholder="Email" required>
      <br>
      <input  id="field" type="password" name="password"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>
      <br>
      <button  id="field" type="submit"  name="login" style="border:1px solid black; width:200px;">
         Entrar
      </button>
   </div>
   <div  style="background-color: #adad85">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" action="indexlogin.php" style=" border:1px solid black; width:auto; border-radius:10%;" class="cancelarbutao">
         Cancelar
       </button>
    </div>
</form>
</div>  
<!---Fim do botão do iniciar sessão --->
<!--- Botão de registar---->
<button class="registar"  onclick="document.getElementById('id2').style.display='block'" style="border:2px solid black;  border-radius:10%;" >
   <i class="fa fa-user-plus">Registar</i>
</button>
<div id="id2" class="modal1">
   <form class="modal-content1 animate" action="indexlogin.php"   method="post" >
      <div class="container1">
         <input  id="field"  type="name"     name="nome"style="border:1px solid black; width:auto;" placeholder="Nome Completo" required>
         <input  id="field"type="text"      name="email_registar"style="border:1px solid black; width:auto;" placeholder="Email" required>
         <input  id="field" type="password"  name="password_registar"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>
         <input  id="field" type="password"  name="password_rep"style="border:1px solid black; width:auto;" placeholder=" Repita a palavra-Passe"required>
         <button  id="field" type="submit"    name="registar" style="border:1px solid black; width:200px;" >
            Criar Conta
         </button>
      </div>
      <div style="background-color: #adad85">
         <button type="button" onclick="document.getElementById('id2').style.display='none'" style=" border:1px solid black; width:auto; border-radius:10%;" class="cancelarbutao">
            Cancelar
         </button>
      </div>
   </form>
</div>

CSS:

.container {
   padding: 28px; /* padding  neste caso  e so  altura do  sistema de login*/
}
.container1 {
   padding: 30px; /* padding  neste caso  e so  altura do  sistema de login*/
}
.container:before { /* faz a seta  para o sistema de login. Mais apelativo*/
   content:'';
   position:absolute;
   width:30px;
   height:28px;
   margin-left:-11px;
   margin-top:-39px;
   background:#fff;
   -webkit-transform:rotate(45deg);  
}
.container1:before { /* faz a seta  para o sistema de registar. Mais apelativo*/
   content:'';
   position:absolute;
   width:30px;
   height:28px;
   margin-left:-24px;
   margin-top:-39px;
   background:#fff;
   -webkit-transform:rotate(45deg); 
 }
.palavra-passe {        /*PASS!!*/  
   float: right;        /*flutuar*/
   padding-top: 16px;   /*preencimento em cima*/
}
.modal {            /* SISTEMA DE LOGIN*/
   display: none;   /* faz com  que o sistema de login fique escondido */
   position: fixed; /* posiciona mais em cima */
   z-index: 1;      /* fica em cima */
   left: 178;
   top: 8;
   width: 100%;      /* comprimento  maximo */
   height: 100%;     /* altura maxima */
   padding-top: 13%; /* movimenta o  sistema de login para baixo*/
   padding-left:52%; /* movimenta o  sistema de login para esquerda*/
}
.modal1 {            /* SISTEMA DE LOGIN*/
   position: fixed;  /* posiciona mais em cima */
   z-index: 1;       /* fica em cima */
   left:170px ;
   top: 28%;
   width: 104%;      /* comprimento  maximo */
   height: 100%;     /* altura maxima */
   padding-top:17px;
   padding-left:51%;
}
.modal-content {
   background-color: #fefefe;
   margin: -13% auto 100% auto; /* move 5% para cima, 15% para baixo e fica centrado*/
   width: 36%;                  /* comprimento  do meu  sistema de login */
   height:39%;
}
.modal-content1 {
   background-color: #fefefe;
   margin: -13% auto 100% auto; /* move 5% para cima, 15% para baixo e fica centrado*/
   width: 34%; /* comprimento  do meu  sistema de registar */
   height:39%;
}
.animate {
   -webkit-animation: animatezoom 0.6s;
   animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
   from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}
}