Hey there! I'm trying to create a navbar button with a cool stripped box shadow effect when hovered, similar to what you see in this image link. I attempted to achieve this using CSS box-shadow and linear gradient, but unfortunately it didn't quite work out as expected.
Here's the current HTML & CSS code that I have:
<body>
background-color: black;
font-family: sans-serif;
color: white;
</body>
<a>
text-decoration: none;
color: white;
</a>
<ul>
height: 10vh;
list-style: none;
display: flex;
justify-content: space-around;
</ul>
<ul a>
margin: auto;
</ul>
<ul li>
margin: auto;
padding: .5em 1em;
transition: all .2s ease-in-out;
</ul li>
<ul li:hover>
cursor: pointer;
background-color: white;
color: black;
border-bottom: 3px solid black;
border-right: 3px solid black;
box-shadow: 5px 5px yellow;
font-weight: bolder;
</ul li:hover>Is it possible to achieve this stripped box shadow effect using only HTML & CSS? If not, what other technologies or tools would be necessary to make this happen?
Thank you so much for your help! 🙏