Links Navigation with Hover Animation using HTML & CSS

Links Navigation with Hover Animation using HTML & CSS

 

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.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Links Navigation with Hover Animation || Learningrobo</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="content"> <div class="container"> <p>Hello developers, in this post of <a href="#">Learningrobo<span>Visit our site</span></a>, going to develop a link navigation with hover animation. You might also like other post of <a href="#">our Website.<span>Learningrobo</span></a> We have been uploading several post of HTML, CSS & JavaScript with free source code file in our <a href="#">Website. <span>Visit Website</span></a> If you get any quries related to our website, then you can send us the message anytime on <a href="#">Mail<span>Mail</span></a> or <a href="#">Instagram<span>Visit Instagram</span></a>. We will be available for you.</p> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css 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;
}
We hope you will like this Links Navigation with Hover Animation using HTML & CSS.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome