Это ошибка CSS, я сделал анимацию для этой кнопки, и, кажется, есть какая -то проблема, которую я не могу решить ⇐ CSS

[Anonymous]

Я сделал эту кнопку, где на дороге верхний ползунок появился с правой стороны, а нижняя с левой стороны, следуя этой логике псевдо -элементов, которые я сделал, используя эти ползунды до и после и позиционировали их должным образом, и для анимации я только что заставил их ширину от 0 до 100 от одного направления к другому, но только нижний элемент мог сделать анимация, а не в верхних. Компилятор CSS, чтобы проверить его < /p>

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

.header-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
background: rgb(255, 199, 2);
font-family: 'Poppins', sans-serif;
box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
cursor: pointer;
border: none;
}

.header-btn::before {
content: "";
width: 0%;
height: 50%;
background: rgb(255, 220, 50);
position: absolute;
top: 0;
left: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}

.header-btn::after {
content: "";
width: 0%;
height: 50%;
background: rgb(255, 180, 0);
position: absolute;
bottom: 0;
right: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}

/* On hover - both blocks expand to full width */
.header-btn:hover::before {
right: 0;
width: 100%;
}

.header-btn:hover::after {
width: 100%;
left: 0;
}

.header-btn span {
text-align: center;
text-decoration: none;
width: 100%;
padding: 15px 30px;
color: rgb(0, 25, 126);
font-size: 15px;
font-weight: 500;
z-index: 10;
position: relative;
transition: all 0.3s ease-in-out;
}

.header-btn:hover span {
animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}< /code>

Hover me

Подробнее здесь: https://stackoverflow.com/questions/797 ... -to-be-som