Подскажите пожалуйста как сделать плавным 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>