Transition не работает, как решить?
Для transition можно указывать свойства которые вы хотите анимировать:
div#register>a>div.btn {
  float: right;
  color: #ffffff;
  font-size: 1.4em;
  background-color: #acc6e6;
  border-radius: 5px;
  padding: 5px 9px;
  font-family: "Bahnschrift";
  font-weight: 600;
  margin-right: 2%;
  margin-top: 10px;
  transform: translateX(0);
  transition: color 0.5s ease, background-color 0.5s ease;
  -o-transition: color 0.5s ease, background-color 0.5s ease;
  -ms-transition: color 0.5s ease, background-color 0.5s ease;
  -webkit-transition: color 0.5s ease, background-color 0.5s ease;
  -moz-transition: color 0.5s ease, background-color 0.5s ease;
  border: 1px solid #f2f2f2;
}

div#register>a>div.btn:hover {
  color: #acc6e6;
  background-color: #ffffff;
}

div#register>a>div.btn:active {
  transform: translateX(2px);
}
+ Дополнительно:
плохая идея анимировать margin, так как он изменяет layout (+ анимация не будет 60fps),
для плавных переходов, которые не требуют изменения layout лучше использовать transform ( https://medium.com/outsystems-experts/how-to-achie... )
Была такая проблема. Задай transition и для :hover элемента и для обычного. Мне помогло. Костыльно, но по-другому хз как решать