CSS hover effects

on

 <!DOCTYPE html>

<html>

    <head>

        <title>Page Title</title>

        <style>

            body{

    background-color: lavender;

}

ul{

    margin-top:50px;

    display:flex;

    list-style: none;

}

li{

    margin-right:20px;

    padding:-20px;

}

a{

    color:black;

    text-decoration: none;

    font-weight: bold;

}

ul li:hover{

    transform:rotate(30deg);

}

        </style>

    </head>

    <body>

        <center>

        <ul class="nav">

    <li><a href="#">HOME</a></li>

    <li><a href="#">CONTACT</a></li>

    <li><a href="#">ABOUT</a></li>

    <li><a href="#">PROFILE</a></li>

        </ul>

        </center>

    </body>

</html>


OUTPUT





Comments

Post a Comment