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 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]

As always, before sharing the codes of this program (Active Tab Hover Animation with Icons). Let's a few talks about the main tags and codes of this program. In the HTML File, first I created a <div> with the class name "container" and created an another <div> inside container tag. Then inside the menu tag, I created five <li> tags and inside each <li> tag I created an <a> anchor tag, and inside this tag I created a <span> with the font awesome icon class name.

In the CSS File, first I placed all elements at the center. Then I gave a particular height and width to the menu container. After that, I placed nav links horizontally and remove the dots of links. Then I did basic styling to the icons like I gave color, font-size, etc. After styling icons, I created another <div> with the class name "line". Then using CSS I created a small height line and placed on the bottom of an icon. At last, using :nth-selector() I moved that bottom line to the particular icon on hovered.

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 these following codes in your file.

You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post