Animated Tab Bar in Html and CSS responsive

Hello everyone, in this post we will create a responsive nav bar using Html and CSS. In the last lesson, we discussed how to create the Buttons in CSS with different styles. But now at this moment, we will create a responsive navigation bar.

Responsive animated tab bar:

The animated tab bar is a bar present at the top of the website. As you can see in the image we have a responsive Animated tab bar. It has an icon on the white animated tab bar. it has different buttons and they have the link to those pages. These buttons also have a hover effect. These buttons are just UI. They are without functionality. If you want to add functionality to it then you have to use javascript and PHP as well for storing the data. Buttons are static before clicking. But after clicking on these icons they are showing an active color of the buttons along with the text or name of the button. The icons are used from fontawesome website. We are starting today’s topic that how to create a menu bar in Html and CSS.

Animated Tab Bar in Html and CSS responsive
Animated Tab Bar

You might like it:

How to create a responsive nav bar?

The navigation bar can be created using different languages and platforms but now we are creating it using HTML and CSS. These are markup languages and we will completely design them using Html and CSS. It will be responsive across all devices.

Download an IDE for the nav bar:

An IDE is a code editor used to write code. For writing the code of HTML and CSS we will use vs code, sublime text 3, or brackets. We are using these code editors because they provide suggestions to write the code and they save a lot of time. They also help to write error-free code.

Source code of Html:

It is a markup language and all the buttons are created using Html. The logo is also imported with the help of Html. We can do a lot of work in HTML but we can’t design using Html. The code of HTML is given below. Click at copy button and then paste it into your IDE.

Source code of CSS:

It is used to design the buttons and navigation bar. We have used different properties of CSS to design the menu bar. For the hover effect, we have also used the properties of CSS. The design code of CSS is presented below. By pasting this code then you have to connect the CSS file with the Html file using the link tag in the Html file.

Source code of JS:

Download source code:

Sometimes newbies don’t know how to create files properly and then connect them with each other. For those, we have created a file and in that file all the files are present. You just need to run the file and the result will be there in front of you.


As you can see above animated tab bar, was created using HTML and CSS only. The active color of all the icons is dull. After clicking they are showing active green color along with the text on the right side of the icons. Now the task is, to change the position of text from the right side to the left side and also change the active color of the icons and text. Change the icon of the setting as well.

For followers, we have special gifts. We share premium templates with our followers only. So don’t forget to follow us.

Thanks for reading this article.

Download Source CodeClick to Download
Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x