I am trying to make a button animation with hovering shows yellow background from one corner then spreading around entire button. When I am using before with background color and z-index it should appear back of written text on button. But its apearing in front of it no matter what index I give. I saw other example over here, its working for them with same properties but not for me. Kindly help. ty.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
/* body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
} */
button{
border: 1px solid black;
background-color:white;
color:black;
padding:20px 50px;
position:relative;
z-index: 2;
}
button::before{
content:"";
left:0;
top:0;
z-index: 1;
height:100%;
width: 100%;
background-color:yellow;
position:absolute;
}
</style>
</head>
<body>
<button type="button" >Hover</button>
</body>
</html>
