Je veux créer un effet de bouton de survol lisse en faisant une transition d'un box-shadow . Pourquoi la transition au survol ne fonctionne-t-elle pas ? Quelles sont les erreurs qui pourraient l'empêcher de fonctionner comme prévu ?
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 class="btn"></div>
</body>
</html>
