Today we are going to see how to create a CSS Isometric Hamburger Menu Hover Effect with Pure HTML & CSS. We will see everything step by step in this video. So, make sure you watch it without skipping.
If you need any kind of help please comment here.
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 Isometric Hamburger Menu Hover Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" /> <link rel="stylesheet" href="style.css"></head><body> <div class="cws_container"> <div class="cws_menu"> <input type="checkbox" id="cws-open-menu" name="cws-open-menu"> <div class="cws_menu_layer top"> <label for="cws-open-menu"> <!-- We have include cws-open-menu label on other two item. Sorry --> <span class="fa-solid fa-bars cws-icon"></span> <span class="cws_layer_content">Home</span> </label> </div> <div class="cws_menu_layer middle"> <label for="cws-open-menu"> <span class="cws_layer_content">Portfolio</span> </label> </div> <div class="cws_menu_layer bottom"> <label for="cws-open-menu"> <span class="cws_layer_content">Contact</span> </label> </div> </div> </div></body></html>
After that create a style.css and copy the below code:
body{ background: #c8f7c5;}.cws_container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; perspective: 1800px;}.cws_menu{ position: relative; width: inherit; height: inherit; transform: rotateX(45deg) rotateZ(45deg); transform-style: preserve-3d;}.cws_menu input[type="checkbox"]{ visibility: hidden;}input[type="checkbox"]:checked ~ .cws_menu_layer label .cws_layer_content{ visibility: visible;}.cws_menu input[type="checkbox"]:checked ~ .top{ transform: translate3d(-200px, 0, 40px);}.cws_menu input[type="checkbox"]:checked ~ .top label .cws-icon{ visibility: hidden;}.cws_menu input[type="checkbox"]:checked ~ .middle{ transform: translate3d(0, 0, 40px);}.cws_menu input[type="checkbox"]:checked ~ .bottom{ transform: translate3d(200px, 0, 40px);}.cws_menu input[type="checkbox"]:checked ~ .bottom:after{ visibility: hidden;}.cws_menu:hover .cws_menu_layer.top{ transform: translateZ(120px);}.cws_menu:hover .cws_menu_layer.middle{ transform: translateZ(80px);}.cws_menu:hover .cws_menu_layer.bottom{ transform: translateZ(40px);}.cws_menu:hover .cws_menu_layer.bottom:after{ visibility: visible;}.cws_menu_layer{ position: absolute; width: inherit; height: inherit; transition: all 200ms ease;}.cws_menu_layer label{ position: relative; display: inline-block; width: inherit; height: inherit; cursor: pointer;}.cws_menu_layer label .cws-icon,.cws_menu_layer label .cws_layer_content{ position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); color: #eee;}.cws_menu_layer label .cws-icon{ font-size: 100px;}.cws_menu_layer label .cws_layer_content{ visibility: hidden; font-size: 33.333333px; font-weight: bold;}.cws_menu_layer.top{ background-color: #e08283; z-index: 3;}.cws_menu_layer.middle{ background-color: #81cfe0; z-index: 2;}.cws_menu_layer.bottom{ background-color: #68c3a3; z-index: 1;}.cws_menu_layer.bottom:after{ position: absolute; top: 0; left: 0; width: inherit; height: inherit; content: ' 0a0'; visibility: hidden; -webkit-box-shadow: 10px 10px 60px 0 rgba(0, 0, 0, 0.75 ); -moz-box-shadow: 10px 10px 60px 0 rgba(0, 0, 0, 0.75 ); box-shadow: 10px 10px 60px 0 rgba(0, 0, 0, 0.75 );}
Full Source Code Download: CSS Isometric Hamburger Menu Hover Effect
Watch More Tutorials
CSS Glowing Gradient Glassmorphism Card Hover Effect
CSS Isometric Menu Hover Effects
Amazing CSS 3D Menu Hover EffectCSS Isometric Hamburger Menu Hover Effect