Why is the transition property not working for box-shadow?-CodePudding

I want to create a smooth hover button effect by transitioning a box-shadow. Why does the hover transition not work? What errors might be causing it to not function as expected?

body{
  background: rgb(180, 181, 180);
 }
.btn{
  height: 100px;
  width: 100px;
  margin: auto;
  border-radius: 20%;
  background: rgb(172, 171, 171);
  box-shadow: 3px 3px 5px rgb(84, 84, 84),-3px -3px 5px rgb(255, 255, 255);
  transition: box-shadow 1s ease-in-out;
  background-image: linear-gradient(135deg,rgb(215, 215, 215),rgb(84, 84, 84));
}

.btn:hover{
  transition: box-shadow 1s ease-in-out;
  box-shadow: inset 3px 3px 5px rgb(84, 84, 84),inset -3px -3px 5px rgb(255, 255, 255);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div ></div>
</body>
</html>

CodePudding user response：

You cannot have transition between inset and non inset shadows. Make sure you always have both of them and play with color opacity:

 body{
  background: rgb(180, 181, 180); 
}
.btn{
  height: 100px;
  width: 100px;
  margin: auto;
  border-radius: 20%;
  background: rgb(172, 171, 171);
  box-shadow: 
    inset 3px 3px 5px rgb(84 84 84 / 0%),
    inset -3px -3px 5px rgb(255 255 255 / 0%),
     3px 3px 5px rgb(84 84 84),
    -3px -3px 5px rgb(255 255 255);
  transition: box-shadow 1s ease-in-out;
  background-image: linear-gradient(135deg,rgb(215, 215, 215),rgb(84, 84, 84));
}

.btn:hover{
  box-shadow: 
    inset 3px 3px 5px rgb(84 84 84),
    inset -3px -3px 5px rgb(255 255 255),
     3px 3px 5px rgb(84 84 84 / 0%),
    -3px -3px 5px rgb(255 255 255 / 0%);
}

 <div ></div>

You can also play with the position as well:

body{
 background: rgb(180, 181, 180); 
}
.btn{
  height: 100px;
  width: 100px;
  margin: auto;
  border-radius: 20%;
  background: rgb(172, 171, 171);
  box-shadow: 
    inset 0 0 0 rgb(84 84 84 / 0%),
    inset 0 0 0 rgb(255 255 255 / 0%),
     3px 3px 5px rgb(84 84 84),
    -3px -3px 5px rgb(255 255 255);
  transition: box-shadow 1s ease-in-out;
  background-image: linear-gradient(135deg,rgb(215, 215, 215),rgb(84, 84, 84));
}

.btn:hover{
  box-shadow: 
    inset 3px 3px 5px rgb(84 84 84),
    inset -3px -3px 5px rgb(255 255 255),
     0 0 0 rgb(84 84 84 / 0%),
     0 0 0 rgb(255 255 255 / 0%);
}

<div ></div>

CodePudding user response：

If you want to set a transition for a inset box-shadow on an element the non :hovered state must also be an inset box-shadow.

You can work around this by creating a new parent element and setting an inset box-shadow and a transition on the new element.

.btn {
  box-shadow: 3px 3px 5px rgb(84, 84, 84), -3px -3px 5px rgb(255, 255, 255);
}

.btn-container:hover {
  box-shadow: inset 3px 3px 5px rgb(84, 84, 84), inset -3px -3px 5px rgb(255, 255, 255);
}

.btn-container {
  background-image: linear-gradient(135deg, rgb(215, 215, 215), rgb(84, 84, 84));
  transition: box-shadow 1s ease-in-out;
  height: 100px;
  width: 100px;
  border-radius: 20%;
  margin: auto;
}

body {
  background: rgb(180, 181, 180);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div >
    <div ></div>
  </div>
</body>

</html>