Блог

При наведении курсора переход работает нормально, но после того, как я убираю мышь, он не переходит обратно в исходное состояние.

Я исправил эту проблему, но не могу вспомнить как. В моем другом коде это то, как у меня это происходит прямо сейчас с этим

 .loginbtn button {
  background: transparent;
  border: none;
  border: solid 2px #fff;
  color: #fff;
  font-size: 30px;
  font-family: 'Archivo Narrow Bold';
  border-radius: 10px;
  padding: 10px 50px 10px 50px;
  margin-top: 35%;
  cursor: pointer;
}

button:hover {
  background-color: #70d8d1;
  color: #0B0C10;
  border:solid 2px #70d8d1;
  transition: 0.3s;
}

.loginbtn button:focus {
  outline: none;
}
  

Он должен переходить в обоих направлениях, когда я навожу на него курсор и когда я «снимаю» его. Но это работает только в первый раз.

Всегда устанавливайте transition свойство css для элемента, а не для его :hover состояния. Следовательно, вы удалите его transition: 0.3s; из button:hover и поместите в button .

 button {
  background: transparent;
  border: none;
  border: solid 2px #fff;
  color: #fff;
  font-size: 30px;
  font-family: 'Archivo Narrow Bold';
  border-radius: 10px;
  padding: 10px 50px 10px 50px;
  margin-top: 35%;
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  background-color: #70d8d1;
  color: #0B0C10;
  border:solid 2px #70d8d1;
}

.loginbtn button:focus {
  outline: none;
}  

 <button>Hello!</button>  

Вам нужно установить переход на сам элемент, а не на состояние наведения курсора, иначе, как только вы уберете мышь, он потеряет свойство перехода и вернет свой первоначальный цвет.

 button {
  background: transparent;
  border: none;
  border: solid 2px #fff;
  color: #fff;
  font-size: 30px;
  font-family: 'Archivo Narrow Bold';
  border-radius: 10px;
  padding: 10px 50px 10px 50px;
  margin-top: 35%;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background-color: #70d8d1;
  color: #0B0C10;
  border:solid 2px #70d8d1;
}