Navigation Bar

3 Best Tab Bar in Html, CSS, and JavaScript

A tab bar helps the users to navigate around the website or application. It connects all the main pages with the buttons of the best tab bar and lets the users access all the content of the website or application easily. In the last post, we created beautiful glow effects using Html and CSS languages. Let’s try to build a tab bar for the website in Html, CSS, and javascript language.

Tab Bar:

Today we will be creating three different tab_bars and each of them has a different concept.

Web tabs
Active tab CSS
Javascript tabs

How to create a Best Tab Bar?

For the development of the tab bar, we can use multiple languages. It varies from mobile to desktop and web. Desktop, android, ios, and the web have different languages for development. But our focus is to create things for websites. For websites, the best languages are Html, CSS, and Javascript. These languages help the developers to create the basic structure, then design that structure and make it attractive and responsive on multiple devices, and in the end, add the functionality in the buttons and add actions into buttons. The steps are:

Download code editor
Html source code
CSS source code
Javascript source code if have
OR download the source code

Web Tabs:

Starting with web tabs. As you can observe the web tab in the image. It has two buttons and they have content connected with them. On clicking on these buttons, they are showing different content. Because they are connected with other pages and sections.

Two buttons are added. So, they are added using Html tags. We have taken the input type as <radio> because it helps to select one option at a time. That’s why the user is allowed to click on one button at a single time. The buttons have their heading <h1>. You can observe that the heading has upper-case text. The text-transform property is added and the value is provided in uppercase.

Below this, the content or section is added/connected with the buttons. That section has a container and it has certain width and height. The background color of the container and button is the same on clicking. On the other hand, the color of the button is different and is not active. You can set the color of the buttons to active and inactive and each state has different color property.

The hover effect is also added using CSS properties. While moving the cursor at the button, it’s showing a hover effect of web tabs. The hover effect is the property of CSS language. You can also add multiple web tabs to this tab bar project.

How to create the Tab bar using Html and CSS?

For the development of website tabs, we will be using HTML and CSS languages. These languages have a huge list of tags and properties. It helps the developers to choose different properties and create anything according to requirements. The main steps are:

Download a code editor
Html source code
CSS source code
Or download the source code

Download code editor

VS CODE

Brackets

Html source code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Bar - FantacyDesigns </title>
<link rel="stylesheet" href="style.css">
 <link>
</head>

<body>
<h1>Pure CSS Tabs <span>Only CSS, No JS!</span></h1>
<ul class="tabs" role="tablist">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1" 
               role="tab" 
               aria-selected="true" 
               aria-controls="panel1" 
               tabindex="0">Description</label>
        <div id="tab-content1" 
             class="tab-content" 
             role="tabpanel" 
             aria-labelledby="description" 
             aria-hidden="false">
          <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </li>
  
    <li>
        <input type="radio" name="tabs" id="tab2" />
        <label for="tab2"
               role="tab" 
               aria-selected="false" 
               aria-controls="panel2" 
               tabindex="0">Specification</label>
        <div id="tab-content2" 
             class="tab-content"
             role="tabpanel" 
             aria-labelledby="specification" 
             aria-hidden="true">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
        </div>
    </li>
</ul>

<br style="clear: both;" />



<script>


</script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Tab Bar - FantacyDesigns </title>

<link>

</head>

<body>

<li>

<label for="tab1"

role="tab"

aria-selected="true"

aria-controls="panel1"

tabindex="0">Description</label>

<div id="tab-content1"

class="tab-content"

role="tabpanel"

aria-labelledby="description"

aria-hidden="false">

<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

</div>

</li>

<li>

<label for="tab2"

role="tab"

aria-selected="false"

aria-controls="panel2"

tabindex="0">Specification</label>

<div id="tab-content2"

class="tab-content"

role="tabpanel"

aria-labelledby="specification"

aria-hidden="true">

<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>

</div>

</li>

</ul>

</script>

</body>

</html>

CSS source code

@import url("https://fonts.googleapis.com/css?family=Lato");
* {

  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 20px;
  font-family: Lato;
  color: #fff;
  background: #9b59b6;
background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);

}

h1 {

  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;

  
text-align:center;
}
h1 span {
  font-size: 13px;
  display: block;
text-align:center;
}

.tabs {
  width: 650px;
  float: none;
  list-style: none;
  position: relative;
  margin: 80px 0 0 10px;
  text-align: left;
margin-left:auto;
margin-right:auto;
}
.tabs li {
  float: left;
  display: block;
}
.tabs input[type="radio"] {
  position: absolute;
  top: 0;
  left: -9999px;
}
.tabs label {
  display: block;
  padding: 14px 21px;
  border-radius: 2px 2px 0 0;
  font-size: 20px;
  font-weight: normal;
  text-transform: uppercase;
 background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);
  cursor: pointer;
  position: relative;
  top: 4px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.tabs label:hover {
 background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);
}
.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 18px;
font-family:arial;
  line-height: 25px;
  padding: 25px;
  position: absolute;
  top: 53px;
  left: 0;
background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.tabs [id^="tab"]:checked + label {
  top: 0;
  padding-top: 17px;
background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

p.link {
  clear: both;
  margin: 380px 0 0 15px;
}
p.link a {
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #612e76;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
p.link a:hover {
background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

@import url("https://fonts.googleapis.com/css?family=Lato");

* {

padding: 0;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

body {

padding: 20px;

font-family: Lato;

color: #fff;

background: #9b59b6;

background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);

}

h1 {

font-weight: normal;

font-size: 40px;

font-weight: normal;

text-transform: uppercase;

text-align:center;

}

h1 span {

font-size: 13px;

display: block;

text-align:center;

}

.tabs {

width: 650px;

float: none;

list-style: none;

position: relative;

margin: 80px 0 0 10px;

text-align: left;

margin-left:auto;

margin-right:auto;

}

.tabs li {

float: left;

display: block;

}

.tabs input[type="radio"] {

position: absolute;

top: 0;

left: -9999px;

}

.tabs label {

display: block;

padding: 14px 21px;

border-radius: 2px 2px 0 0;

font-size: 20px;

font-weight: normal;

text-transform: uppercase;

background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);

cursor: pointer;

position: relative;

top: 4px;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.tabs label:hover {

background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);

}

.tabs .tab-content {

z-index: 2;

display: none;

overflow: hidden;

width: 100%;

font-size: 18px;

font-family:arial;

line-height: 25px;

padding: 25px;

position: absolute;

top: 53px;

left: 0;

background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;

}

.tabs [id^="tab"]:checked + label {

top: 0;

padding-top: 17px;

background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);

}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {

display: block;

}

p.link {

clear: both;

margin: 380px 0 0 15px;

}

p.link a {

text-transform: uppercase;

text-decoration: none;

display: inline-block;

color: #fff;

padding: 5px 10px;

margin: 0 5px;

background-color: #612e76;

-moz-transition: all 0.2s ease-in;

-o-transition: all 0.2s ease-in;

-webkit-transition: all 0.2s ease-in;

transition: all 0.2s ease-in;

}

p.link a:hover {

background-image: linear-gradient(to right, #00a5b1, #008fad, #0079a6, #00629b, #004a89);

}

Download source code:

The source code of this website tab is provided below. If you are facing errors in connecting the web tab code of HTML and CSS with each other, then it is an easy way to download the file of these website tabs.

Web Tabs :

Download Source CodeClick to Download

Go to top

Active Tab Bar:

As you can see in the image we have created an active tab in HTML and CSS. The concept of this tab is related to the above tab but the design and some functionalities are different. Let’s discuss something related to it and its development process.

Tab Bar content and development process:

This tab bar has a white and simple background. Above this, a box is created. Some CSS properties are applied to this box. It has a round corner which is created using a radius. Radius value is provided like 2, 5, 10, etc.

Then the shadow is also there for this box. It differentiates the box from the background. If you wanna use CSS Shadows then we have created multiple shadows for your usage in your projects. This box has three different tabs. The number of tabs can be increased to 4, 5, 6, or according to requirements.

In this first tab, we have a notification number. This notification number can be applied to all the tabs. When new notifications arise then it will show the number of notifications.

Therefore, the active tab has a different color from the inactive tab. A small container is moving around the tabs when you click on any tab. Let us see how to create this tab section for any website in HTML and CSS languages. Finally, the result will be here.

How to create an active tab bar in CSS?

We have introduced a simple way of creating our projects. Follow these steps to create this active tab in Html and CSS.

Download code editor
Download the HTML source code
And download the CSS code
Download project code

Download code editor:

The recommended code editors are:

VS CODE

Sublime text 3

Html source code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Bar - FantacyDesigns </title>
<link rel="stylesheet" href="style.css">
 <link>
</head>

<body>
<div class="cont">
<h1>Sliding tabs | CSS transitions </h1></div>
<div class="container">

	<div class="tabs">
		<input type="radio" id="radio-1" name="tabs" checked />
		<label class="tab" for="radio-1">Upcoming<span class="notification">2</span></label>
		<input type="radio" id="radio-2" name="tabs" />
		<label class="tab" for="radio-2">Development</label>
		<input type="radio" id="radio-3" name="tabs" />
		<label class="tab" for="radio-3">Completed</label>
		<span class="glider"></span>
	</div>
</div>
<script>


</script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Tab Bar - FantacyDesigns </title>

<link>

</head>

<body>

<h1>Sliding tabs | CSS transitions </h1></div>

<label class="tab" for="radio-1">Upcoming<span class="notification">2</span></label>

<label class="tab" for="radio-2">Development</label>

<label class="tab" for="radio-3">Completed</label>

</div>

</script>

</body>

</html>

CSS Source code

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
:root {
  --primary-color: #61b98f;
  --secondary-color: #e3e7eb;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: rgba(230, 238, 249, 0.5);
background:#61b98f;
}
h1{
text-align:center;
font-family: "Inter", sans-serif;
font-size:40px;
font-weight:900;
margin-top:150px;
text-shadow: 0 0 3px #61b98f;
background:#fff;
color:#61b98f;
padding:10px;
border-radius:50px;



}
.cont {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs {
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
  padding: 0.75rem;
  border-radius: 99px;box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.tabs * {
  z-index: 2;
}

input[type=radio] {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  width: 200px;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s ease-in;
}

.notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 0.75rem;
  border-radius: 50%;
  background-color: var(--secondary-color);
  transition: 0.15s ease-in;
}

input[type=radio]:checked + label {
  color: var(--primary-color);
}
input[type=radio]:checked + label > .notification {
  background-color: var(--primary-color);
  color: #fff;
}

input[id=radio-1]:checked ~ .glider {
  transform: translateX(0);
}

input[id=radio-2]:checked ~ .glider {
  transform: translateX(100%);
}

input[id=radio-3]:checked ~ .glider {
  transform: translateX(200%);
}

.glider {
  position: absolute;
  display: flex;
  height: 54px;
  width: 200px;
  background-color: var(--secondary-color);
  z-index: 1;
  border-radius: 99px;
  transition: 0.25s ease-out;
}

@media (max-width: 700px) {
  .tabs {
    transform: scale(0.6);
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

:root {

--primary-color: #61b98f;

--secondary-color: #e3e7eb;

}

*:after,

*:before {

box-sizing: border-box;

}

body {

font-family: "Inter", sans-serif;

background-color: rgba(230, 238, 249, 0.5);

background:#61b98f;

}

h1{

text-align:center;

font-family: "Inter", sans-serif;

font-size:40px;

font-weight:900;

margin-top:150px;

text-shadow: 0 0 3px #61b98f;

background:#fff;

color:#61b98f;

padding:10px;

border-radius:50px;

}

.cont {

position: absolute;

left: 0;

top: 0;

right: 0;

display: flex;

align-items: center;

justify-content: center;

box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;

}

.container {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

display: flex;

align-items: center;

justify-content: center;

}

.tabs {

display: flex;

position: relative;

background-color: #fff;

box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);

padding: 0.75rem;

border-radius: 99px;box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

}

.tabs * {

z-index: 2;

}

input[type=radio] {

display: none;

}

.tab {

display: flex;

align-items: center;

justify-content: center;

height: 54px;

width: 200px;

font-size: 1.25rem;

font-weight: 500;

border-radius: 99px;

cursor: pointer;

transition: color 0.15s ease-in;

}

.notification {

display: flex;

align-items: center;

justify-content: center;

width: 2rem;

height: 2rem;

margin-left: 0.75rem;

border-radius: 50%;

background-color: var(--secondary-color);

transition: 0.15s ease-in;

}

input[type=radio]:checked + label {

color: var(--primary-color);

}

input[type=radio]:checked + label > .notification {

background-color: var(--primary-color);

color: #fff;

}

input[id=radio-1]:checked ~ .glider {

transform: translateX(0);

}

input[id=radio-2]:checked ~ .glider {

transform: translateX(100%);

}

input[id=radio-3]:checked ~ .glider {

transform: translateX(200%);

}

.glider {

position: absolute;

display: flex;

height: 54px;

width: 200px;

background-color: var(--secondary-color);

z-index: 1;

border-radius: 99px;

transition: 0.25s ease-out;

}

@media (max-width: 700px) {

.tabs {

transform: scale(0.6);

}

Download source code:

The source code is provided below. In case you are facing an error in connecting files, then it is helpful for you.

Active Tab Bar :

Download Source CodeClick to Download

Go to top

Javascript Tabs:

Here we have a beautiful and awesome tab bar in Html, CSS, and Javascript. The above tab bars were simple due to only HTML and CSS. But now we have used javascript as well for more functionalities and animations. Let us see how we build this tab bar.

Javascript tab bar:

Lastly, our new tab bar has two sections (upper and lower). Let’s discuss separately each of them.

Upper section:

The upper section of the tab has different properties. It has a background color and all the tabs are placed inside that box with the background color. It has three tabs.

So, we created a small box and it’s rotating by clicking the tabs. This box has a different color from the background and is used as a hover effect for showing the active tab. Furthermore, the lower section is mentioned below.

Lower section:

Below this, we have icons of the tab bar which are created using javascript. In the first icon place, we have the image of the user in a round form. All other icons have the same color. But everyone has a different hover effect and color. On hovering and clicking on each icon they show a different color.

The icons are imported from font awesome. YOu can manually set the icons from assets. Download the icons from google and then place them inside the computer storage. After that call them inside the project by their location and file name.

How to create a Javascript tab bar?

It is really simple to create a tab bar in javascript and HTML, CSS. For that, we need to follow some basic steps. The steps are:

Download code editor:

The important code editors for developers are visual studio code and sublime text 3.

Tab Bar Html source code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Bar - FantacyDesigns </title>
<link rel="stylesheet" href="style.css">
 <link>
</head>

<body>
<nav class="amazing-tabs">
  <div class="filters-container">
    <div class="filters-wrapper">
      <ul class="filter-tabs">
        <li>
          <button class="filter-button filter-active" data-translate-value="0">
            New
          </button>
        </li>
        <li>
          <button class="filter-button" data-translate-value="100%">
            Popular
          </button>
        </li>
        <li>
          <button class="filter-button" data-translate-value="200%">
            Following
          </button>
        </li>
      </ul>
      <div class="filter-slider" aria-hidden="true">
        <div class="filter-slider-rect">&nbsp;</div>
      </div>
    </div>
  </div>
  <div class="main-tabs-container">
    <div class="main-tabs-wrapper">
      <ul class="main-tabs">
        <li>
          <button class="round-button" data-translate-value="0" data-color="red">
            <span class="avatar">
              <img src="https://images.pexels.com/photos/3756985/pexels-photo-3756985.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="user avatar" />
            </span>
          </button>
        </li>
        <li>
          <button class="round-button gallery active" style="--round-button-active-color: #2962ff" data-translate-value="100%" data-color="blue">
            <svg fill="currentColor" viewBox="0 0 16 16">
              <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
              <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z" />
            </svg>
          </button>
        </li>
        <li>
          <button class="round-button" style="--round-button-active-color: #00c853" data-translate-value="200%" data-color="green">
            <svg fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
            </svg>
          </button>
        </li>
        <li>
          <button class="round-button" style="--round-button-active-color: #aa00ff" data-translate-value="300%" data-color="purple">
            <svg fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
            </svg>
          </button>
        </li>
        <li>
          <button class="round-button" style="--round-button-active-color: #ff6d00" data-translate-value="400%" data-color="orange">
            <svg fill="currentColor" viewBox="0 0 16 16">
              <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
            </svg>
          </button>
        </li>
      </ul>
      <div class="main-slider" aria-hidden="true">
        <div class="main-slider-circle">&nbsp;</div>
      </div>
    </div>
  </div>
</nav>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Tab Bar - FantacyDesigns </title>

<link>

</head>

<body>

<li>

New

</button>

</li>

<li>

Popular

</button>

</li>

<li>

Following

</button>

</li>

</ul>

</div>

<li>

</span>

</button>

</li>

<li>

</svg>

</button>

</li>

<li>

</svg>

</button>

</li>

<li>

</svg>

</button>

</li>

<li>

</svg>

</button>

</li>

</ul>

</div>

</nav>

</body>

</html>

Tab Bar CSS source code:

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --background-color: #bbdefb;
  --blue-50: #e3f2fd;
  --blue-100: #bbdefb;
  --blue-A700: #2962ff;
  --green-50: #e8f5e9;
  --green-100: #c8e6c9;
  --green-A700: #00c853;
  --purple-50: #f3e5f5;
  --purple-100: #e1bee7;
  --purple-A700: #aa00ff;
  --orange-50: #fff3e0;
  --orange-100: #ffe0b2;
  --orange-A700: #ff6d00;
  --orange-700: #f57c00;
  --grey-900: #212121;
  --white: #ffffff;
  --round-button-active-color: #212121;
  --translate-main-slider: 100%;
  --main-slider-color: #e3f2fd;
  --translate-filters-slider: 0;
  --filters-container-height: 3.8rem;
  --filters-wrapper-opacity: 1;
}

html {
  font-size: 62.5%;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color 0.4s ease-in-out;
  background-color: var(--background-color);
}

button {
  border: none;
  cursor: pointer;
  background-color: transparent;
  outline: none;
}

nav.amazing-tabs {
  background-color: var(--white);
  border-radius: 2.5rem;
  user-select: none;
  padding-top: 1rem;
}

.main-tabs-container {
  padding: 0 1rem 1rem 1rem;
}

.main-tabs-wrapper {
  position: relative;
}

ul.main-tabs,
ul.filter-tabs {
  list-style-type: none;
  display: flex;
}

ul.main-tabs li {
  display: inline-flex;
  position: relative;
  padding: 1.5rem;
  z-index: 1;
}

.avatar,
.avatar img {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  pointer-events: none;
}

.avatar img {
  object-fit: cover;
}

.round-button {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-900);
  transition: color 0.2s ease-in-out;
}

.round-button:hover,
.round-button.active {
  color: var(--round-button-active-color);
}

.round-button svg {
  pointer-events: none;
  height: 2.8rem;
  width: 2.8rem;
  transform: translate(0, 0);
}

.main-slider {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.5rem;
  z-index: 0;
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-main-slider));
}

.main-slider-circle {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  transition: background-color 0.4s ease-in-out;
  background-color: var(--main-slider-color);
}

.animate-jello {
  animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.filters-container {
  overflow: hidden;
  padding: 0 3rem;
  transition: max-height 0.4s ease-in-out;
  max-height: var(--filters-container-height);
}

.filters-wrapper {
  position: relative;
  transition: opacity 0.2s ease-in-out;
  opacity: var(--filters-wrapper-opacity);
}

.filter-tabs {
  border-radius: 1rem;
  padding: 0.3rem;
  overflow: hidden;
  background-color: var(--orange-50);
}

.filter-tabs li {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 33.33%;
}

.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  flex-grow: 1;
  height: 3rem;
  padding: 0 1.5rem;
  color: var(--orange-700);
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
}

.filter-button.filter-active {
  transition: color 0.4s ease-in-out;
  color: var(--grey-900);
}

.filter-slider {
  pointer-events: none;
  position: absolute;
  padding: 0.3rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.filter-slider-rect {
  height: 3rem;
  width: 33.33%;
  border-radius: 0.8rem;
  background-color: var(--white);
  box-shadow: 0 0.1rem 1rem -0.4rem rgba(0, 0, 0, 0.12);
  transition: transform 0.4s ease-in-out;
  transform: translateX(var(--translate-filters-slider));
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

*::before,

*::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--background-color: #bbdefb;

--blue-50: #e3f2fd;

--blue-100: #bbdefb;

--blue-A700: #2962ff;

--green-50: #e8f5e9;

--green-100: #c8e6c9;

--green-A700: #00c853;

--purple-50: #f3e5f5;

--purple-100: #e1bee7;

--purple-A700: #aa00ff;

--orange-50: #fff3e0;

--orange-100: #ffe0b2;

--orange-A700: #ff6d00;

--orange-700: #f57c00;

--grey-900: #212121;

--white: #ffffff;

--round-button-active-color: #212121;

--translate-main-slider: 100%;

--main-slider-color: #e3f2fd;

--translate-filters-slider: 0;

--filters-container-height: 3.8rem;

--filters-wrapper-opacity: 1;

}

html {

font-size: 62.5%;

}

html,

body {

height: 100%;

}

body {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

transition: background-color 0.4s ease-in-out;

background-color: var(--background-color);

}

button {

border: none;

cursor: pointer;

background-color: transparent;

outline: none;

}

nav.amazing-tabs {

background-color: var(--white);

border-radius: 2.5rem;

user-select: none;

padding-top: 1rem;

}

.main-tabs-container {

padding: 0 1rem 1rem 1rem;

}

.main-tabs-wrapper {

position: relative;

}

ul.main-tabs,

ul.filter-tabs {

list-style-type: none;

display: flex;

}

ul.main-tabs li {

display: inline-flex;

position: relative;

padding: 1.5rem;

z-index: 1;

}

.avatar,

.avatar img {

height: 4rem;

width: 4rem;

border-radius: 50%;

pointer-events: none;

}

.avatar img {

object-fit: cover;

}

.round-button {

height: 4.8rem;

width: 4.8rem;

border-radius: 50%;

display: inline-flex;

align-items: center;

justify-content: center;

color: var(--grey-900);

transition: color 0.2s ease-in-out;

}

.round-button:hover,

.round-button.active {

color: var(--round-button-active-color);

}

.round-button svg {

pointer-events: none;

height: 2.8rem;

width: 2.8rem;

transform: translate(0, 0);

}

.main-slider {

pointer-events: none;

position: absolute;

top: 0;

left: 0;

padding: 1.5rem;

z-index: 0;

transition: transform 0.4s ease-in-out;

transform: translateX(var(--translate-main-slider));

}

.main-slider-circle {

height: 4.8rem;

width: 4.8rem;

border-radius: 50%;

transition: background-color 0.4s ease-in-out;

background-color: var(--main-slider-color);

}

.animate-jello {

animation: jello-horizontal 0.9s both;

}

@keyframes jello-horizontal {

0% {

transform: scale3d(1, 1, 1);

}

30% {

transform: scale3d(1.25, 0.75, 1);

}

40% {

transform: scale3d(0.75, 1.25, 1);

}

50% {

transform: scale3d(1.15, 0.85, 1);

}

65% {

transform: scale3d(0.95, 1.05, 1);

}

75% {

transform: scale3d(1.05, 0.95, 1);

}

100% {

transform: scale3d(1, 1, 1);

}

.filters-container {

overflow: hidden;

padding: 0 3rem;

transition: max-height 0.4s ease-in-out;

max-height: var(--filters-container-height);

}

.filters-wrapper {

position: relative;

transition: opacity 0.2s ease-in-out;

opacity: var(--filters-wrapper-opacity);

}

.filter-tabs {

border-radius: 1rem;

padding: 0.3rem;

overflow: hidden;

background-color: var(--orange-50);

}

.filter-tabs li {

position: relative;

z-index: 1;

display: flex;

flex: 1 0 33.33%;

}

.filter-button {

display: flex;

align-items: center;

justify-content: center;

border-radius: 0.8rem;

flex-grow: 1;

height: 3rem;

padding: 0 1.5rem;

color: var(--orange-700);

font-family: "Open Sans", sans-serif;

font-weight: 400;

font-size: 1.4rem;

}

.filter-button.filter-active {

transition: color 0.4s ease-in-out;

color: var(--grey-900);

}

.filter-slider {

pointer-events: none;

position: absolute;

padding: 0.3rem;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 0;

}

.filter-slider-rect {

height: 3rem;

width: 33.33%;

border-radius: 0.8rem;

background-color: var(--white);

box-shadow: 0 0.1rem 1rem -0.4rem rgba(0, 0, 0, 0.12);

transition: transform 0.4s ease-in-out;

transform: translateX(var(--translate-filters-slider));

}

Javascript source code:

<script>

const mainTabs = document.querySelector(".main-tabs");
const mainSliderCircle = document.querySelector(".main-slider-circle");
const roundButtons = document.querySelectorAll(".round-button");

const colors = {
  blue: {
    50: {
      value: "#e3f2fd"
    },
    100: {
      value: "#bbdefb"
    }
  },
  green: {
    50: {
      value: "#e8f5e9"
    },
    100: {
      value: "#c8e6c9"
    }
  },
  purple: {
    50: {
      value: "#f3e5f5"
    },
    100: {
      value: "#e1bee7"
    }
  },
  orange: {
    50: {
      value: "#ffe0b2"
    },
    100: {
      value: "#ffe0b2"
    }
  },
  red: {
    50: {
      value: "#ffebee"
    },
    100: {
      value: "#ffcdd2"
    }
  }
};

const getColor = (color, variant) => {
  return colors[color][variant].value;
};

const handleActiveTab = (tabs, event, className) => {
  tabs.forEach((tab) => {
    tab.classList.remove(className);
  });

  if (!event.target.classList.contains(className)) {
    event.target.classList.add(className);
  }
};

mainTabs.addEventListener("click", (event) => {
  const root = document.documentElement;
  const targetColor = event.target.dataset.color;
  const targetTranslateValue = event.target.dataset.translateValue;

  if (event.target.classList.contains("round-button")) {
    mainSliderCircle.classList.remove("animate-jello");
    void mainSliderCircle.offsetWidth;
    mainSliderCircle.classList.add("animate-jello");

    root.style.setProperty("--translate-main-slider", targetTranslateValue);
    root.style.setProperty("--main-slider-color", getColor(targetColor, 50));
    root.style.setProperty("--background-color", getColor(targetColor, 100));

    handleActiveTab(roundButtons, event, "active");

    if (!event.target.classList.contains("gallery")) {
      root.style.setProperty("--filters-container-height", "0");
      root.style.setProperty("--filters-wrapper-opacity", "0");
    } else {
      root.style.setProperty("--filters-container-height", "3.8rem");
      root.style.setProperty("--filters-wrapper-opacity", "1");
    }
  }
});

const filterTabs = document.querySelector(".filter-tabs");
const filterButtons = document.querySelectorAll(".filter-button");

filterTabs.addEventListener("click", (event) => {
  const root = document.documentElement;
  const targetTranslateValue = event.target.dataset.translateValue;

  if (event.target.classList.contains("filter-button")) {
    root.style.setProperty("--translate-filters-slider", targetTranslateValue);
    handleActiveTab(filterButtons, event, "filter-active");
  }
});


</script>

100

101

102

103

104

const mainTabs = document.querySelector(".main-tabs");

const mainSliderCircle = document.querySelector(".main-slider-circle");

const roundButtons = document.querySelectorAll(".round-button");

const colors = {

blue: {

50: {

value: "#e3f2fd"

100: {

value: "#bbdefb"

}

green: {

50: {

value: "#e8f5e9"

100: {

value: "#c8e6c9"

}

purple: {

50: {

value: "#f3e5f5"

100: {

value: "#e1bee7"

}

orange: {

50: {

value: "#ffe0b2"

100: {

value: "#ffe0b2"

}

red: {

50: {

value: "#ffebee"

100: {

value: "#ffcdd2"

}

};

const getColor = (color, variant) => {

return colors[color][variant].value;

};

const handleActiveTab = (tabs, event, className) => {

tabs.forEach((tab) => {

tab.classList.remove(className);

});

if (!event.target.classList.contains(className)) {

event.target.classList.add(className);

}

};

mainTabs.addEventListener("click", (event) => {

const root = document.documentElement;

const targetColor = event.target.dataset.color;

const targetTranslateValue = event.target.dataset.translateValue;

if (event.target.classList.contains("round-button")) {

mainSliderCircle.classList.remove("animate-jello");

void mainSliderCircle.offsetWidth;

mainSliderCircle.classList.add("animate-jello");

root.style.setProperty("--translate-main-slider", targetTranslateValue);

root.style.setProperty("--main-slider-color", getColor(targetColor, 50));

root.style.setProperty("--background-color", getColor(targetColor, 100));

handleActiveTab(roundButtons, event, "active");

if (!event.target.classList.contains("gallery")) {

root.style.setProperty("--filters-container-height", "0");

root.style.setProperty("--filters-wrapper-opacity", "0");

} else {

root.style.setProperty("--filters-container-height", "3.8rem");

root.style.setProperty("--filters-wrapper-opacity", "1");

}

});

const filterTabs = document.querySelector(".filter-tabs");

const filterButtons = document.querySelectorAll(".filter-button");

filterTabs.addEventListener("click", (event) => {

const root = document.documentElement;

const targetTranslateValue = event.target.dataset.translateValue;

if (event.target.classList.contains("filter-button")) {

root.style.setProperty("--translate-filters-slider", targetTranslateValue);

handleActiveTab(filterButtons, event, "filter-active");

}

});

</script>

Download source code:

The source code of this javascript tab_tar is given below. Download it for free.

Javascript Tabs:

Download Source CodeClick to Download

Tasks and conclusion:

If you want to implement these tab bars and learn something new. Then I recommend you create a landing page and then implement these tab bars inside your landing page.