HTML
<!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"> <link rel="stylesheet" href="style.css"> <title>CodeAtnow | Navigation</title> </head> <body> <div class="menu"> <a href="#" class="link"> <span class="link-icon"> <!-- icon --> <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none"></rect> <path d="M213.3815,109.61945,133.376,36.88436a8,8,0,0,0-10.76339.00036l-79.9945,72.73477A8,8,0,0,0,40,115.53855V208a8,8,0,0,0,8,8H208a8,8,0,0,0,8-8V115.53887A8,8,0,0,0,213.3815,109.61945Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> </svg> <!-- /icon --> </span> <span class="link-title">Home</span> </a> <a href="#" class="link"> <span class="link-icon"> <!-- icon --> <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none"></rect> <polyline points="76.201 132.201 152.201 40.201 216 40 215.799 103.799 123.799 179.799" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline> <line x1="100" y1="156" x2="160" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> <path d="M82.14214,197.45584,52.201,227.397a8,8,0,0,1-11.31371,0L28.603,215.11268a8,8,0,0,1,0-11.31371l29.94113-29.94112a8,8,0,0,0,0-11.31371L37.65685,141.65685a8,8,0,0,1,0-11.3137l12.6863-12.6863a8,8,0,0,1,11.3137,0l76.6863,76.6863a8,8,0,0,1,0,11.3137l-12.6863,12.6863a8,8,0,0,1-11.3137,0L93.45584,197.45584A8,8,0,0,0,82.14214,197.45584Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> </svg> <!-- /icon --> </span> <span class="link-title">Games</span> </a> <a href="#" class="link"> <span class="link-icon"> <!-- icon --> <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none"></rect> <path d="M45.42853,176.99811A95.95978,95.95978,0,1,1,79.00228,210.5717l.00023-.001L45.84594,220.044a8,8,0,0,1-9.89-9.89l9.47331-33.15657Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> <line x1="96" y1="112" x2="160" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> <line x1="96" y1="144" x2="160" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> </svg> <!-- /icon --> </span> <span class="link-title">Chat</span> </a> <a href="#" class="link"> <span class="link-icon"> <!-- icon --> <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none"></rect> <circle cx="116" cy="116" r="84" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle> <line x1="175.39356" y1="175.40039" x2="223.99414" y2="224.00098" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line> </svg> <!-- /icon --> </span> <span class="link-title">Search</span> </a> <a href="#" class="link"> <span class="link-icon"> <!-- icon --> <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none"></rect> <circle cx="128" cy="96" r="64" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="16"></circle> <path d="M30.989,215.99064a112.03731,112.03731,0,0,1,194.02311.002" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path> </svg> <!-- /icon --> </span> <span class="link-title">Profile</span> </a> </div> </body> </html>
CSS
*, *:after, *:before { box-sizing: border-box; } body { font-family: "Inter", sans-serif; overflow: hidden; line-height: 1.5; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #2c2e2f; } .menu { padding: 2rem; background-color: #2c2e2f; position: relative; width: calc(130px + 4 * 70px + 4rem); display: flex; justify-content: center; border-radius: 20px 20px; box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.4); } .link { display: inline-flex; justify-content: center; align-items: center; width: 70px; height: 50px; border-radius: 99em; position: relative; z-index: 1; overflow: hidden; transform-origin: center left; transition: width 0.2s ease-in; text-decoration: none; color: white; } .link:before { position: absolute; z-index: -1; content: ""; display: block; border-radius: 99em; width: 100%; height: 100%; top: 0; transform: translateX(100%); transition: transform 0.2s ease-in; transform-origin: center right; border: 1px dotted whitesmoke; background-color: #2c2e2f; } .link:hover, .link:focus { outline: 0; width: 130px; } .link:hover:before, .link:focus:before, .link:hover .link-title, .link:focus .link-title { transform: translateX(0); opacity: 1; } .link-icon { width: 28px; height: 28px; display: block; flex-shrink: 0; left: 18px; position: absolute; } .link-icon svg { width: 28px; height: 28px; } .link-title { transform: translateX(100%); transition: transform 0.2s ease-in; transform-origin: center right; display: block; text-align: center; text-indent: 28px; width: 100%; }
Follow Us On Telegram
Get Full Source Code Zipped File
Telegram link