CSS Isometric Menu Hover Effects

CSS Isometric Menu Hover Effects | Pure HTML CSS 3D Menu

In this video, we are going to learn how to create CSS Isometric Menu Hover Effects | Pure HTML CSS 3D Menu.

[embedyt] https://www.youtube.com/watch?v=eE6RblUQLN4 [/embedyt]

Source Code:

First, create an index.html file and copy the below code:

 

<!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>CSS Isometeric Menu Hover Effects</title>    <link rel="stylesheet" href="style.css" /></head><body>    <ul>        <li style="--i:6"><a href="#">Home</a></li>        <li style="--i:5"><a href="#">About</a></li>        <li style="--i:4"><a href="#">Services</a></li>        <li style="--i:3"><a href="#">Portfolio</a></li>        <li style="--i:2"><a href="#">Team Members</a></li>        <li style="--i:1"><a href="#">Contact</a></li>    </ul>        <ul>        <li style="--i:6"><a href="#">Home</a></li>        <li style="--i:5"><a href="#">About</a></li>        <li style="--i:4"><a href="#">Services</a></li>        <li style="--i:3"><a href="#">Portfolio</a></li>        <li style="--i:2"><a href="#">Team Members</a></li>        <li style="--i:1"><a href="#">Contact</a></li>    </ul>    </body></html>

Now, create a style.css file and copy the below code:

 

@import url('https://fonts.googleapis.com/css2?display=swap&family=Roboto:wght@300&display=swap');*{    margin:0;    padding:0;    box-sizing: border-box;    font-family: 'Roboto';}body{    display: flex;    justify-content: center;    align-items: center;    min-height: 100vh;    background-color: #2A4849;}ul{    position: relative;    transform: skewY(-15deg);    -webkit-transform: skewY(-15deg);    -moz-transform: skewY(-15deg);    -ms-transform: skewY(-15deg);    -o-transform: skewY(-15deg);    margin-left: 150px;}ul li{    position: relative;    list-style: none;    width: 200px;    background-color: #0ebbc5;    padding:15px;    z-index: var(--i);    transition: 0.5s;}ul li:hover{    background:#0a848a;    transform: translateX(-50px)}ul li:before{    content: '';    position: absolute;    top:0;    left:-40px;    width: 40px;    height: 100%;    background-color: #0ba5b3;    transform-origin:right;    transform: skewY(45deg);    transition: .5s;}ul li:hover:before{    background-color: #0d7a80;}ul li:after{    content: '';    position: absolute;    top:-40px;    left:0;    width: 100%;    height: 40px;    background-color: #0ba5b3;    transform-origin: bottom;    transform: skewX(45deg);    transition: 0.5s;}ul li:hover:after{    background-color: #078995;}ul li a{    text-decoration: none;    color:#fff;    display: block;    text-transform: uppercase;    font-weight: bold;    letter-spacing: 0.1em;    transform: 0.5s;    -webkit-transform: 0.5s;    -moz-transform: 0.5s;    -ms-transform: 0.5s;    -o-transform: 0.5s;}ul li:hover a{    color: #333;}ul li:last-child:after{    box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25);}

Full Source Code:  Download

 

Post a Comment

0 Comments