1. У элементов должны быть уникальные id и что-бы, как вы в комментариях к вопросу, не копировать стили меняя только имя, используют классы. Например:
<a class="a" href="/AUTH-2/Log_In">Войти</a>
<a class="a" href="/AUTH-2/Sign_In">Регистрация</a>
<a class="a" href="/AUTH-2/Sign_Out">Выйти</a>
2. И в css тоже меняете на класс. Кстати, есть html атрибут align, но нет такого свойства css.
body {
background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)
}
footer {
background: #AAAAAA;
}
.a {
text-decoration: none;
outline: none;
display: inline-block;
margin: 10px;
color: white;
box-shadow: 0 0 0 2px white;
padding: 20px 0;
width: 150px;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
overflow: hidden;
}
.a span {
font-family: 'Montserrat', sans-serif;
position: relative;
z-index: 5;
}
.a:before, .a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.a:before {
transform: translateX(-100%);
background: white;
transition: transform .3s cubic-bezier(.55, .055, .675, .19);
}
.a:after {
background: #413ad5;
transform: translateX(100%);
transition: transform .3s cubic-bezier(.16, .73, .58, .62) .3s;
}
.a:hover:before, .a:hover:after {
transform: translateX(0);
}
3. Вероятно, вы планировали обернуть содержимое ссылок в span, который имеется в стилях и что бы слова оказались поверх псевдоэлементов, но забыли.
<a class="a" href="/AUTH-2/Log_In"><span>Войти</span></a>
<a class="a" href="/AUTH-2/Sign_In"><span>Регистрация</span></a>
<a class="a" href="/AUTH-2/Sign_Out"><span>Выйти</span></a>
