Ads Top

CSS hover effects navigation

How to create CSS hover effect in navigation or tab.
<!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:

Copyright Reserved to Anything Learn. Powered by Blogger.