ads_header

Menu Hover CSS Effect


Menu Hover CSS Effect


Preview



Hello guys, this post I will share about how to create a Menu with Effect when highlighting a pointer (Hover). There are many types of effects we get for using CSS and that is one reference for making your website. Because, the more unique the animation or effect you make, it will make the user experience much better.





Okay, create a project folder and create the index.html and style.css files in it. If it's finished, open index.html and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu Hover Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portofolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

The above code only adds 5 menus, and of course you can add more menus to your project.
Now, Open style.css and enter the following code

body
{
    margin: 0;
    padding: 0;
    font-family: 'Roboto',sans-serif;
}
ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
}
ul li a{
    position: relative;
    display: block;
    text-align: center;
    margin: 0 25px;
    color: #222;
    font-size: 30px;
    text-decoration: none;
    text-transform: uppercase;
    transition: .5s;
    padding: 5px 10px;
}
ul li a:before{
    content: '';
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 12px;
    height: 12px;
    border: 3px solid #0a71d2;
    border-width: 0 0 3px 3px;
    transition: .5s;
    opacity: 0;
}
ul li a:hover:before{
    bottom: -8px;
    left: -8px;
    opacity: 1;
}
ul li a:after{
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 12px;
    height: 12px;
    border: 3px solid #0a71d2;
    border-width: 3px 3px 0 0;
    transition: .5s;
    opacity: 0;
}

ul li a:hover:after{
    top: -8px;
    right:-8px;
    opacity: 1;
}

ul li a:hover{
    color: #fff;
    background: #0a71d2;
}

You can adjust your font type, font color or font size yourself. When finished, save all files and run index.html

No comments:

Powered by Blogger.