Thu Jul 14 2022

Double Line Hover Effect

CSS6626 views

File Name: double-line-hover-effect-on-menu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Line Hover Effect on Menu</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet"> 
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Raleway', sans-serif;
        }

        body { background-color: #383838; }

        section {
            display: flex;
            width: 100%;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        ul {
            display: flex;
            list-style: none;
        }

        ul li {
            padding: 10px 15px;
            margin: 0 10px;
            position: relative;
        }

        ul li::before,
        ul li::after {
            position: absolute;
            content: '';
            width: 0;
            height: 2px;
            background-color: #fff;
            transition: 0.3s all ease-in-out;
        }

        ul li::before {
            top: 0;
            left: 0;
        }

        ul li::after {
            bottom: 0;
            right: 0;
        }

        ul li.active::before,
        ul li:hover::before {
            right: 0;
            left: auto;
            width: 100%;
            background-color: #f39c12;
        }

        ul li.active::after,
        ul li:hover::after {
            right: auto;
            left: 0;
            width: 100%;
            background-color: #f39c12;
        }

        ul li a {
            text-decoration: none;
            cursor: pointer;
            color: #fff;
            font-size: 20px;
            transition: 0.3s all ease-in-out;
        }

        ul li.active a,
        ul li:hover a {
            color: #f39c12;
        }
    </style>
</head>
<body>
    <section>
        <ul>
            <li class="active"><a href="">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Contact Us</a></li>
        </ul>
    </section>
</body>
</html>

Result Screenshot(s)

Double Line Hover EffectWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.