Как исправить кнопку CSS "(` a` Tag) анимация на Hover ⇐ Html

[Anonymous]

Пожалуйста, посмотрите на эту скрипку:
https://jsfiddle.net/tsyjabuv/
Первоначально, строки, которые образуют контур кнопки, немного пройдены на их пересечение на верхних левых и нижних. нижний левый. < /p>
нижняя часть работает. Верх изначально верен, но при преобразовании он появляется под углом. Что я могу сделать, чтобы исправить?

Код: Выделить всё

.custom-button {
font-size: clamp(0.875rem, 2vw, 1rem);
/* 14px base, responsive */
padding: 10px 30px;
color: var(--heading-color);
border: 1px solid;
font-weight: 600;
text-transform: capitalize;
display: inline-block;
position: relative;
transition: all 0.5s ease 0s;
background: transparent;
white-space: nowrap;
line-height: normal;
color: #4A83A5 !important;
border-color: #4A83A5 !important;
font-family: var(--font-raleway);
text-decoration: none !important;
}

.custom-button:hover,
.custom-button:focus {
color: #fff !important;
background-color: #4A83A5 !important;
text-decoration: none !important;
outline: none;
}

.custom-button:before {
content: "";
position: absolute;
top: 0;
left: 0;
transform: translate(-100%, -100%);
-webkit-transform: translate(-100%, -100%);
border: solid;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
transition: all .7s ease-out;
border-color: inherit;
}

.custom-button:hover:before {
left: 100%;
transform: translate(0, -100%) rotate(45deg);
-webkit-transform: translate(0, -100%) rotate(45deg);
}

.custom-button:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
transform: translate(100%, 100%) rotate(0deg);
-webkit-transform: translate(100%, 100%) rotate(0deg);
border: solid;
border-width: 1px 0 0 1px;
display: inline-block;
padding: 3px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
transition: all .7s ease-out;
border-color: inherit;
}

.custom-button:hover:after {
right: 100%;
transform: translate(0, 100%) rotate(90deg);
-webkit-transform: translate(0, 100%) rotate(90deg);
}

.custom-button.cta-button {
border-width: 1px;
padding: 10px 30px 10px 30px;
}

.custom-button.cta-button:before {
border-right-width: 1px;
border-bottom-width: 1px;
}

.custom-button.cta-button:after {
border-top-width: 1px;
border-left-width: 1px;
}< /code>
[url=/donate]DONATE[/url]

Подробнее здесь: https://stackoverflow.com/questions/796 ... n-on-hover