Skip to content
Advertisements

CSS Menu-Pink

HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.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="#">PORTFOLIO</a></li>
        <li><a href="#">OUR TEAM</a></li>
        <li><a href="#">CONTACT US</a></li>
    </ul>

</body>
</html> 

CSS CODE:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #112c38;
}
ul{
    margin: 0;
    padding: 0;
    display:flex;
}
ul li{
    list-style:none;
    margin: 0 20px;
    transition: .5s;
}
ul li a{
    text-decoration: none;
    display: block;
    padding: 5px;
    font-size: 18px;
    font-family: sans-serif;
    color: #fff;
    text-transform: uppercase;
    transition: .5s;
}
ul:hover li a{
    transform: scale(1.5);
    opacity: .2;
    filter: blur(5px);
}
ul li a:hover{
    transform: scale(2);
    opacity: 1;
    filter: blur(0px);
}
ul li a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff497c;
    transition:transform .5s;
    transform-origin: right;
    transform: scaleX(0);
    z-index: -1
}
ul li a:hover:before{
    transition:transform .5s;
    transform-origin: left;
    transform: scaleX(1);
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: