Skip to content

CSS Menu-Pink


<!DOCTYPE html>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" href="">

        <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>



    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #112c38;
    margin: 0;
    padding: 0;
ul li{
    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);

Leave a Reply

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

You are commenting using your 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: