CSS：框阴影过渡多个阴影

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>