ads_header

Home HOVER HTML CSS Menu Hover CSS Effect VIEWS

Menu Hover CSS Effect

September 30, 2018
Read

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

Tags :
Powered by Blogger.