<div class="supegnatan" id="supegnatan-1">
  <div class="satisaction">
  <div class="versenia" onclick="togglesupegnatan()">
  ×</div>
   
<h1>Войти</h1>  
  <div class="input-field"><input placeholder="Email" class="validate"></div>
  <div class="input-field"><input placeholder="Password" class="validate"></div>
  <button class="vtoraya-knopka">Войти</button>
  <p>У вас нет аккаунта? <a href="/ссылка">Регистрация</a></p>
  </div>
  </div>

.supegnatan .satisaction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-150%) scale(0);
  width: 350px;
  height: 430px;
  z-index: 2;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  background: #dfdfdf;
   
  z-index: 1;
}

.supegnatan .versenia {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  color: white;
  font-size: 30px;
  border-radius: 50%;
  padding: 2px 5px 7px 5px;
  background: #237be6;
  cursor:pointer;
  }

.supegnatan.operose .satisaction {
transition: all 300ms ease-in-out;
transform: translate(-50%,-50%) scale(1);
}

h1 {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  padding-top: 20px;
  padding-bottom: 10px;
  color: rgb(91, 91, 92);
}

a {
  font-weight: 600;
  color: rgb(19, 50, 225);
}

.input-field .validate {
padding: 20px;
font-size: 16px;
border-radius: 5px;
border: none;
margin-bottom: 15px;
color: #090a0a;
background: #ebeef1;
border: 2px solid rgb(214, 214, 214);
width: 270px;
outline: none;
}

.kepeva-knopka {
color: rgb(3, 48, 146);
font-size: 25px;
font-weight: 500;
padding: 15px 50px;
border-radius: 5px;
border: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #dadadb;
cursor:pointer;  
transition: box-shadow .35s ease !important;
outline: none;
}

.kepeva-knopka:operose {  
background-color: rgb(2, 42, 112);
color: #ebeef1;
border: none;
}

.vtoraya-knopka {
color: white;
font-size: 17px;
font-weight: 500;
margin-top: 20px;
padding: 14px 38px;
border-radius: 3px;
border: none;
background: #134b8f;
cursor:pointer;  
transition: box-shadow .35s ease !important;
outline: none;
}

.vtoraya-knopka:operose{
background: linear-gradient(145deg,#2e2c2c, #161616);
   
border: none;
outline: none;
}
p{
color: #181717;
padding: 20px;
}

function togglesupegnatan() {
  document.getElementById("supegnatan-1")
  .classList.toggle("operose");
}