Hover Animation – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Mon, 15 May 2023 05:30:55 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Navigation Menu Hover Animation in HTML CSS https://www.codingnepalweb.com/navigation-menu-hover-animation-html-css/ https://www.codingnepalweb.com/navigation-menu-hover-animation-html-css/#respond Mon, 21 Nov 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4144 Create Navigation Menu Hover Animation in HTML CSS

You may have seen the hover animation navigation menu on websites when the pointer is moved to any menu link. If you are looking for a quick and easy way to create this Underline hover animated menu, this blog is for you.

But before continuing this blog, If you haven’t read my previous article about how to create a Login & Registration Form in HTML CSS, be sure to check it out. I hope it will improve your HTML and CSS skills.

In this blog, you’ll learn how to create Navigation Menu Hover Animation in HTML & CSS. Hover animations like these are commonly used on websites. Even if you only know the basics of HTML and CSS, you can still use them to create Navigation Menu Hover Animation.

Navigation hover animation is the term for the animation that shows when a user hovers over a navigation link. In essence, these animations provide the impression that we have clicked or hovered over them.

Have a look at the given preview of my animated navigation  as you can see there are some navigation links and  you are seeing only one underline under the navigation links

If you want to create this Navigation Hover Animation Menu step-by-step with me, you can check out the video tutorial that I have provided below. I have explained all the HTML and CSS code that I used.

Navigation Menu Hover Animation | Video Tutorial

All of the HTML and CSS code that I used to create this hover animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Navigation Menu Hover Animation. By watching the video tutorial, you will be able to create this Navigation Menu Hover Animation.

As you have seen all the navigation menu bar hover animations and effects using HTML and CSS in this video tutorial. At first, we only saw navigation links, but when I moved the cursor over the menu links, beautiful and distinct underlined animations appeared smoothly.

I hope now you can create this Navigation Menu Hover Animation in HTML and CSS. If you want to take all the HTML and CSS code that I have used to create these animated menu links then all the source codes are given below.

You May Like This:

Menu Hover Animation [Source Codes]

To create a Navigation Menu Hover Animation, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Navigation Menu Hover Animation by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Navigation Bar Hover Animation </title>
  <!---Custom Css File!--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
      </ul>
    </nav>
  </div>
</body>
</html>

Second, paste the following codes into your style.css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.container{
  width: 100%;
  height: 100vh;
  background: #2192ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav{
  background: #fff;
  border-radius: 9px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
nav ul li{
  display: inline-block;
  list-style: none;
  font-size: 2rem;
  padding: 0 10px;
  margin: 0 20px;
  cursor: pointer;
  position: relative;
}
nav ul li:after{
  content: '';
  width: 0;
  height: 3px;
  background: #2192ff;
  position: absolute;
  left: 0;
  bottom: -10px;
  transition: 0.5s;
}
nav ul li:hover::after{
  width:100%;
}

If you face any difficulties while creating your Navbar Hover Animation or your code is not working as expected, you can download the source code files for this Navigation Menu Bar Hover Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/navigation-menu-hover-animation-html-css/feed/ 0 Border Loading Animation in HTML CSS & JavaScript https://www.codingnepalweb.com/border-loading-animation-html-css-js/ https://www.codingnepalweb.com/border-loading-animation-html-css-js/#respond Sat, 08 Oct 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4156 Border Loading Animation in HTML CSS & JavaScript

Hello there, as usual, today you will learn to create exciting projects, Card’s Border Loading Animation, and the animated percentage inside it from 0 to 100 in HTML CSS and JavaScript. As you know there are lots of Card Designs that I have already created and they are available on this blog, but today’s project will be different and exciting.

Border Animation means the animation that happens with the border of any stuff like a card and others. Percentage animation means the increase of the number from 0 to 100%. You can see this type of loading animation in different websites and applications while we are exporting something from it.

Take a quick look at the given image of our project [Border Loading Animation with Percentage], at the right side you can see there is a card with a black border about it. At the top right side, there is a white border and inside the card, there is a percentage.

Basically, when the webpage is reloaded, the white border starts to rotate around that card, and along with the border, the percentage starts animating as well from 0 to 100%. When the percentage becomes 100 the border stops animating and the card’s border color changed from black to white.

To watch the real demo of this project [Border Loading Animation with Percentage] how it animates and all the HTML CSS and JavaScript code that I have used to create this animation, I have provided a full video tutorial of this project [Border Loading Animation with Percentage].

Border Loading Animation in HTML CSS JavaScript

I have provided all the HTML CSS & JavaScript code that I used to create this project [Border Loading Animation with Percentage], before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial when the webpage is reloaded the border and percentage number started animating and after that when the percentage number became 100 it stopped to animate and the card border color changed from dark to white. To make that card and border animation and the percentage I used HTML and CSS to animate the percentage number and to make border white after I used some JavaScript code.

I believe now you can make this project [Border Loading Animation with Percentage], easily by using HTML CSS, and JavaScript. If you are feeling difficulty creating this card and its border animation with percentages, I have provided all the source codes below. From there you copy or download all the source code files.

You Could Like This:

Border Loading Animation [Source Codes]

To create a Border Loading Animation using HTML CSS & JavaScript, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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>Border Loading Animaton</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container active">
      <span class="overlay" id="percent">0%</span>
    </div>

    <script>
      const container = document.querySelector(".container"),
        percent = document.querySelector("#percent");

      let perVal = 0;

      let increament = setInterval(() => {
        perVal++;
        percent.textContent = `${perVal}%`;

        if (perVal == 100) {
          clearInterval(increament);
          container.classList.remove("active");
        }
      }, 100);
    </script>
  </body>
</html>

Second, paste the following codes into your style.css file.

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background-color: #131221;
}
body,
.container,
.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  position: relative;
  height: 450px;
  width: 350px;
  border-radius: 16px;
  background-color: #fff;
  overflow: hidden;
}
.container.active {
  background-color: #000;
}
.container::before {
  content: "";
  position: absolute;
  height: 650px;
  width: 650px;
  background-image: conic-gradient(transparent, transparent, transparent, #fff);
}
.container.active:before {
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.container .overlay {
  position: absolute;
  height: 440px;
  width: 340px;
  font-size: 40px;
  font-weight: 500;
  color: #fff;
  border-radius: 12px;
  background-color: #131221;
}

That’s all, now you’ve successfully created a Dynamic Calendar App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.

 

]]> https://www.codingnepalweb.com/border-loading-animation-html-css-js/feed/ 0 Social Media Navigation Button in HTML CSS & JavaScript https://www.codingnepalweb.com/media-icons-navigation-html-css-javascript/ https://www.codingnepalweb.com/media-icons-navigation-html-css-javascript/#respond Mon, 22 Aug 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4163 Social Media Navigation Button in HTML CSS & JavaScript

Hello buddy, I believe that you are doing and creating incredible pieces of stuff. Today in this blog, you will learn to make Social Media Navigation Button in HTML CSS & JavaScript. I would like to tell you that I have created many projects about Media Icons and Hover animation. As with others, today’s project will be beneficial for all types of websites.

Social Media Navigation button is the Icon that acts like a button and helps the user to redirect particular webpage. For example, we can see on the website there is lots of social media icons like Facebook, Twitter, Instagram, and all and, when we click on the Facebook icons we are redirected to the Facebook website or application.

Have a  quick look at the given image of our project [Social Media Navigation Button], On the image you can see a total of seven media icons, and at the bottom of those icons, there is a close button. Also, when we hover over that medial icon they indicate the name of the social media icon through the tooltip. Actually at first on the screen, those media icons will be hidden and there will be a icon. When clicking on that icon all the social media navigation button appears.

Let’s watch the give video tutorial of our project [Social Media Navigation Button], a demo of our project, and all the HTML CSS and JavaScript code that I have used to create this project.

Social Media Navigation Button in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript codes that I have used to make this Social Media Navigation Button. Before getting into the source code file, I would like to explicate the given video tutorial shortly.

As you have seen in the video tutorial of our project [Social Media Navigation Button], there was a button with a plus icon, and all the social media nav buttons were hidden. When I clicked on the plus icon, all the social media navigation buttons appeared and the plus icon also changed into a cross. Similarly, when I again clicked on that cross icon all the media navigation buttons disappeared and the plus icon changed into a plus icon. When I hover over that icon those icons a tooltip appeared with the name of that icon.

To create the UI design and bring all font icons of that social media navigation menu button I have used HTML and CSS and to show and hide the median nav icon and change the plus and cross buttons I have used some javascript code.

Now I supposed that you can build this Social Media Navigation Button in HTML CSS and JavaScript. If you are feeling tough to create this, I have provided all the source code below.

You Might Like This:

Social Media Navigation Button [Source Code]

To get the following HTML CSS and Javascript code for Social Media Navigation Button. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding by CodingLab | www.codinglabweb.com-->
<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>Social Media Navigation Buttons</title>-->
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- Fontawesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
    />
  </head>
  <body>
    <div class="container">
      <span class="close-btn">
        <i class="fa-solid fa-xmark"></i>
      </span>

      <div class="media-icons">
        <a href="#" style="background: #e60023">
          <i class="fa-brands fa-pinterest"></i>
          <span class="tooltip" style="color: #e60023">Pinterest</span>
        </a>
        <a href="#" style="background: #0e76a8">
          <i class="fa-brands fa-linkedin"></i>
          <span class="tooltip" style="color: #0e76a8">Linkedin</span>
        </a>
        <a href="#" style="background: #ff0000">
          <i class="fa-brands fa-youtube"></i>
          <span class="tooltip" style="color: #ff0000">YouTube</span>
        </a>
        <a href="#" style="background: #ea4689">
          <i class="fa-brands fa-dribbble"></i>
          <span class="tooltip" style="color: #ea4689">Dribbble</span>
        </a>
        <a href="#" style="background: #8e36ff">
          <i class="fa-brands fa-github"></i>
          <span class="tooltip" style="color: #8e36ff">Github</span>
        </a>
        <a href="#" style="background: #4267b2">
          <i class="fa-brands fa-facebook-f"></i>
          <span class="tooltip" style="color: #4267b2">Facebook</span>
        </a>
        <a href="#" style="background: #1da1f2">
          <i class="fa-brands fa-twitter"></i>
          <span class="tooltip" style="color: #1da1f2">Twitter</span>
        </a>
      </div>
    </div>

    <script>
      const closeBtn = document.querySelector(".close-btn");

      closeBtn.addEventListener("click", () => {
        closeBtn.classList.toggle("open");
      });
    </script>
  </body>
</html>

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background: #e3f2fd;
}
.container {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.media-icons {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-btn.open ~ .media-icons {
  transform: translateX(0);
}
.media-icons a {
  text-decoration: none;
  position: relative;
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin: 6px;
}
.media-icons a i {
  color: #fff;
}
.media-icons a .tooltip {
  position: absolute;
  left: 55px;
  font-size: 14px;
  font-weight: 400;
  pointer-events: none;
  background-color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  transform: translateY(-25px);
  opacity: 0;
  transition: all 0.2s linear;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
a:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}
a .tooltip::before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(45deg);
  background-color: #fff;
}
.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
  background-color: #8e36ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transform: rotate(45deg);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-btn.open {
  transform: rotate(90deg);
  background-color: #de0611;
}

If you face any difficulties while creating your Social Media Navigation Buttons or your code is not working as expected, you can download the source code files for this Social Media Nav Buttons for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/media-icons-navigation-html-css-javascript/feed/ 0 Awesome Social Media Buttons with Hover Animation | HTML & CSS https://www.codingnepalweb.com/social-media-buttons-with-hover-animation/ https://www.codingnepalweb.com/social-media-buttons-with-hover-animation/#comments Thu, 30 Jul 2020 07:06:00 +0000 https://codingnepalweb.com/2020/07/30/awesome-social-media-buttons-with-hover-animation-html-css/ Awesome Social Media Buttons with Hover Animation HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Awesome Social Media Buttons with Hover Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Glowing Effect on Social Media Buttons. And now I’m going to create an Awesome Hover Animation on Socia Media Icons.

The Social Icons Widget represents small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, icons are automatically represented on your site, giving your visitors to connect with you through your preferred social media networks.

In this program (Awesome Social Media Buttons with Hover Animation), at first, on the webpage, there are shown five icons or buttons of different Social Media Networks and when you hover on the particular button then the width of that button expand smoothly and visible the name of particular hovered network. This hover animation is fully created using only HTML & CSS.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Awesome Social Media Buttons with Hover Animation).

Video Tutorial of Social Media Buttons with Hover Animation

 
In this video, you have seen the animation of these social media buttons and I hope you have understood the codes behind creating this animation. If you know basic HTML & CSS then you can easily understand the codes of this program and also can create this type of animation. You can use HTML <a> anchor tag and insert your social account link inside the href attribute of <a> tag to redirect the user to the specific social media profile.

If you like this program (Awesome Social Media Buttons with Hover Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:

Social Media Buttons with Hover Animation [Source Codes]

To create this program (Awesome Social Media Buttons with Hover Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Social Media Icons | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="wrapper">
         <div class="button">
            <div class="icon">
               <i class="fab fa-facebook-f"></i>
            </div>
            <span>Facebook</span>
         </div>
         <div class="button">
            <div class="icon">
               <i class="fab fa-twitter"></i>
            </div>
            <span>Twitter</span>
         </div>
         <div class="button">
            <div class="icon">
               <i class="fab fa-instagram"></i>
            </div>
            <span>Instagram</span>
         </div>
         <div class="button">
            <div class="icon">
               <i class="fab fa-github"></i>
            </div>
            <span>Github</span>
         </div>
         <div class="button">
            <div class="icon">
               <i class="fab fa-youtube"></i>
            </div>
            <span>YouTube</span>
         </div>
      </div>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper .button{
  display: inline-block;
  height: 60px;
  width: 60px;
  float: left;
  margin: 0 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.wrapper .button:hover{
  width: 200px;
}
.wrapper .button .icon{
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
  background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
  background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
  background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
  background: #333;
}
.wrapper .button:nth-child(5):hover .icon{
  background: #ff0000;
}
.wrapper .button .icon i{
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
  color: #fff;
}
.wrapper .button span{
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) span{
  color: #4267B2;
}
.wrapper .button:nth-child(2) span{
  color: #1DA1F2;
}
.wrapper .button:nth-child(3) span{
  color: #E1306C;
}
.wrapper .button:nth-child(4) span{
  color: #333;
}
.wrapper .button:nth-child(5) span{
  color: #ff0000;
}

That’s all, now you’ve successfully created Awesome Social Media Buttons with Hover Animation using HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/social-media-buttons-with-hover-animation/feed/ 25 Active Tab Hover Animation with Icons in HTML & CSS https://www.codingnepalweb.com/active-tab-hover-animation-with-icons/ https://www.codingnepalweb.com/active-tab-hover-animation-with-icons/#respond Sat, 27 Jun 2020 11:02:00 +0000 https://codingnepalweb.com/2020/06/27/active-tab-hover-animation-with-icons-in-html-css/ Active Tab Hover Animation with Icons in HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Menu Bar with Active Tab Hover Animation using only HTML & CSS. Earlier I have shared many blogs on how to create a Responsive Navbar or Sidebar Menu using HTML & CSS. But now it’s time to create Active Tab Animation with Icons.

Navigation Bar is the most important UI (User Interface) element of the website for visitors or content viewers to find their required information from the website. A website navigation bar is the most commonly represented as a horizontal list of links at the top of every page.

Today in this blog I’ll share with you this program (Active Tab Hover Animation with Icons). In this program, there are some menu icons (home, love, user, etc.) with a small height of line on the bottom of the Menu Icon. This line indicates to the users or viewers about which tab or menu is currently active. When you hover on the particular Menu Icon that Bottom Line will move smoothly to that hovered icon.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Active Tab Hover Animation with Icons).

Video Tutorial of Active Tab Hover Animation

 
In the video, you have seen the Active Tab Hover Animation and I hope you have understood the basic codes and concepts behind creating this animation. This is a Pure CSS Program which means I only used HTML & CSS to create this program. You can also create this type of hover animation and use it on your websites, projects, and HTML page.

If you’re a beginner and you know HTML & CSS then you can take this design at the next level with your creativity. If you like this program (Active Tab Hover Animation with Icons) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects and websites.

You might like this:

Active Tab Hover Animation [Source Codes]

To create this program (Active Tab Hover Animation with Icons). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Active Tab Hover Animation | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="container">
         <div class="menu">
            <li><a href="#"><span class="fas fa-home"></span></a></li>
            <li><a href="#"><span class="far fa-comment"></span></a></li>
            <li><a href="#"><span class="far fa-envelope"></span></a></li>
            <li><a href="#"><span class="far fa-heart"></span></a></li>
            <li><a href="#"><span class="far fa-user"></span></a></li>
            <div class="line"></div>
         </div>
      </div>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.container{
  height: 80px;
  width: 50vw;
  line-height: 80px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}
.container .menu{
  display: flex;
  position: relative;
}
.container .menu li{
  list-style: none;
  flex: 1;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
}
.container .menu li a{
  color: #1d1f20;
  transition: color 0.3s ease;
}
.container .menu li:hover a{
  color: #f23b26;
}
.container .menu li:first-child a{
  color: #f23b26;
}
.container .menu .line{
  position: absolute;
  height: 5px;
  width: 20%;
  background: #f23b26;
  left: 0;
  bottom: 0;
  transition: all 0.3s ease;
}
.container .menu li:nth-child(2):hover ~ .line{
  left: 20%;
}
.container .menu li:nth-child(3):hover ~ .line{
  left: 40%;
}
.container .menu li:nth-child(4):hover ~ .line{
  left: 60%;
}
.container .menu li:nth-child(5):hover ~ .line{
  left: 80%;
}

That’s all, now you’ve successfully created an Active Tab Hover Animation with Icons in HTML & CSS. If your code doesn’t work or you’ve faced any errors/problems then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/active-tab-hover-animation-with-icons/feed/ 0