Hello developers, today in this blog, you'll learn to create a Links Navigation with Hover Animation using HTML & CSS.
The links navigation is a user interface element within a webpage that contains links to other sections of the webpage. This means that no matter what page you are viewing, you can use the navigation link to visit other sections of the website.
In this blog(Links Navigation with Hover Animation), there is a webpage with a navigation link with the hover animation. When you hover over the link the tooltip appears with the respective websites. When you click on the link it will redirect you to the particular webpage. There are five links are there in this webpage, when you hover over the link the respective webpage of the link will have appeared.
The source code of this Links Navigation with Hover Animation is given below, if you want the source code of this program, you can copy it. You can use this Links Navigation with Hover Animation on your project.
Links Navigation with Hover Animation [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #00C9A7;
}
.container{
max-width: 550px;
margin: 0 20px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
padding: 40px 40px;
border-radius: 12px;
}
.container p{
font-size: 18px;
font-weight: 400;
text-align: justify;
}
.container p a{
position: relative;
text-decoration: none;
}
.container p a span{
position: absolute;
white-space: nowrap;
padding: 6px 15px;
background: #00C9A7;
border-radius: 25px;
text-align: center;
color: #fff;
font-size: 16px;
top: -44px;
left: 50%;
transform: translate(-40% , -20px);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container p a:hover span{
opacity: 1;
pointer-events: auto;
transform: translate(-50% , 0);
}
.container p span::before{
content: ' ';
position: absolute;
height: 15px;
width: 15px;
background: #00C9A7;
bottom: -6px;
left: 50%;
z-index: -1;
transform: translate(-50%) rotate(45deg);
}
.container p a:hover{
text-decoration: underline;
}
.credit{
text-align: center;
color: #000;
margin: 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem creating this Links Navigation with Hover Animation using HTML & CSS, then contact us or comment to us. We'll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team