Slide-in transition hover effect HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-in transition hover effect</title>
<style>
a {
font-size: 2rem;
color: #284b63;
padding: .2rem .4rem;
text-decoration: none;
border-radius: 8px;
background-size: 100% 250%;
background-image: linear-gradient(to bottom, #fff 50%, #fcd900 50%);
transition:
background-position .2s ease-in-out,
color .2s ease-in-out;
}
a:hover,
a:focus {
background-position: 0% 100%;
color: #333;
}
</style>
</head>
<body>
<a href="maibuith.com">Mai</a>
</body>
</html>