CSS hover effects navigation
How to create CSS hover effect in navigation or tab.
Also you can visit this url: https://embed.plnkr.co/PiUO04Ee616FLcuIaVod/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Anything Learn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
.anythingHover{ max-width:800px; margin:50px auto;}
.anythingHover ul{ list-style:none; display:inline-block;}
.anythingHover ul li{ display:inline-block;}
.anythingHover ul li a{ color:#555; padding:5px 15px; text-decoration:none; font-family:arial; position:relative;}
.anythingHover ul li a:after{ position:absolute; width:0; height:3px; background:#0bf; bottom:0; left:0; content:''; transition:all 0.2s}
.anythingHover ul li a:hover:after{ width:100%; transition:all 0.2s}
</style>
</head>
<body>
<div class="anythingHover">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Also you can visit this url: https://embed.plnkr.co/PiUO04Ee616FLcuIaVod/
No comments:
Note: Only a member of this blog may post a comment.