Is there a solution to prevent flickering without compromising the intended design? The issue arises when hovering over a moving or animated element and accidentally un-hovering because it moves beneath the cursor.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #FFEE32;
}
.button {
box-shadow: -10px 10px;
background-color: #FFEE32;
border: 3px solid;
display: inline-block;
cursor: pointer;
color: #202020;
font-size: 30px;
font-weight: bold;
padding: 20px 30px;
transition: all 0.15s linear 0s;
text-decoration: none;
position: relative;
box-sizing: border-box;
}
.button:hover {
top: 3px;
transition: all 0.15s linear 0s;
left: -3px;
color: #FFEE32;
background-color: #202020;
border: #FFEE32;
box-shadow: 0px 0px 0 #ffe800 !important;
position: relative;
}
</style>
</head>
<body>
<h2>Animated Button - "Pressed Effect"</h2>
<div class="see">
<button class="button">Click Me</button>
</div>
</body>
</html>
Take a look at the example here and try hovering on the edges from the right and bottom.