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