CSS: переход Box-Shadow нескольких теней

Question

Итак, у меня есть кнопка с начальным набором теней. Я хочу перевести тень при наведении на другое значение тени.

button {
  height:100px;
  width:200px;
  padding:10px;
  margin:5px;
  border:none;
  border-radius:10px;
  box-shadow: 10px 10px 20px #dde4ef, -10px -10px 20px white;
  transition: box-shadow 0.5s ease-in;
}

button:hover{
  box-shadow: inset 10px 10px 20px #dde4ef, inset -10px -10px 20px white;
}

<button>This Button</button>

Не работает

Answer 1

Подготовьте ваши тени, используя inset 0 0 0 transparent, inset 0 0 0 transparent,

button {
  height:100px;
  width:200px;
  padding:10px;
  margin:5px;
  border:none;
  border-radius:10px;
  display: inline-block;
  box-shadow:
     inset 0 0 0 transparent, inset 0 0 0 transparent, /* Prepared inset shadows */
     10px 10px 20px #dde4ef, -10px -10px 20px white;   /* Outer shadows */
  transition: box-shadow 0.5s ease-in;
}

button:hover{
  box-shadow: inset 10px 10px 20px #dde4ef, inset -10px -10px 20px white;
}

<button>This Button</button>