Как добавить плавности box-shadow

Question

Подскажите пожалуйста как сделать плавным box-shadow. Через transition не получается

.button {
    padding: 11px 16px;
    border: none;
    border-radius: 5px;
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.28);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
    background-color: #57a216;
    transition: box-shadow 0.5s, background-image 0.5s;
    cursor: pointer;
}
.button:hover {
    box-shadow: 0 3px 6px rgba(70, 131, 17, 0.3), inset 0 -2px 1px rgba(0, 0, 0, 0.28);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), #57a216;
}

<button class="button">Вперёл</button>

Answer 1

box-shadow: 0 3px 6px rgba(70, 131, 17, 0), inset 0 -2px 1px rgba(0, 0, 0, 0.28);

Помогло добавить ещё одно прозрачное свойство и получилось заанимировать!

БЛОГ НА HUSL

Как добавить плавности box-shadow

Ответы (1 шт):