'CSS: Box-Shadow Transition Multiple Shadows

So I have a button with initial shadow set. I want to transition the shadow on hover into another value of shadow.

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>

Its not working

htmlcss


Solution 1:[1]

Prepare your inset shadows by using 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 type="button">HOVER ME</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions