Sliding Tabs
Sliding Tabs

Hy Guys, today we are going to create sliding tabs. Sliding tabs are generally used for menus with a basic sliding animation. We will create sliding tabs using HTML & CSS only.

In our slider we have three tabs, when a user clicks on any tab, the slider slides to that specific tab with slow animation. Let’s create our sliding tab.

Table of Contents

As we mentioned, we will create this using HTML & CSS. So first we will create our index.html file.

index.html

Write this code inside the body tag. First of all, create a div as the class name ‘container’.

<div class="container">

</div>


Create another div inside the container class with class name ‘tabs’.

<div class="container">
   <div class="tabs">

   </div>
</div>

Create input tag with type radio button like this.

<div class="container">
   <div class="tabs">
      <input type="radio" id="radio-1" name="tabs" checked />
   </div>
</div>


We are using radio buttons to select a single choice from multiple options. the checked is showing the default selection.

Create Label with class name ‘tab’.

<div class="container">
   <div class="tabs">
      <input type="radio" id="radio-1" name="tabs" checked />
      <label class="tab" for="radio-1">HTML<span class="notification">2</span></label>
   </div>
</div>


here we are using a span tag to show notifications as you can see in the first gif image.

Repeat this process two times more.

<div class="container">
   <div class="tabs">
      <input type="radio" id="radio-1" name="tabs" checked />
      <label class="tab" for="radio-1">HTML<span class="notification">2</span></label>
      <input type="radio" id="radio-2" name="tabs" />
      <label class="tab" for="radio-2">CSS</label>
      <input type="radio" id="radio-3" name="tabs" />
      <label class="tab" for="radio-3">JavaScript<span class="notification">5</span></label>
      <span class="glider"></span>
   </div>
</div>

make only a single input checked.

Here is our index.html code is ready, connect the style.css in <head> section with this.

<link rel="stylesheet" type="text/css" href="style.css">


Now write the code for the style.css file.

style.css

Import google fonts as we have used in our code.

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


create a :root to define a variable, here we have defined two variables for primary color and secondary color.

:root {
  --primary-color: #185ee0;
  --secondary-color: #e6eef9;
}


set the border-sizing to border-box, as universal property with :after & :before psuedo elements.

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

write CSS for the body, set the font family and background color as white.

body {
  font-family: "Inter", sans-serif;
  background-color: #ffffff;
}


set the position of the container to absolute with display flex and align the content center.

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

set the background color and box-shadow for the tabs class.

.tabs {
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1), 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;
}
.tabs * {
  z-index: 2;
}


as you can see in the above code we used box-shadow 3 times. It means it will give 3 shadow effects to our ‘tabs’ class.

Now set the display none to input type radio.

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


set the style for ‘tab’ class and ‘notification’ class.

.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;
}


set the color when the user clicks on a tab, it will change the label and notification color.

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


This is the most important part of our code. When a user clicks on a tab the slider moves to that tab, which is only possible because of this code. Here we are changing the ‘x’ position of the slider to move. see the code below.

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%);
}


set the glider class structure CSS.

.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;
}


here is another special code, when a user downsizes the window, the tab bar stays in the same size, so here we are writing code to downsize the tab when a user changes the window size.

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


for the difference remove the above code and then resize the window you will see the difference.

If you are having any issues with the code, then you can visit our GitHub account for this code. Click Here!

You can run this code live in our editor below.

<!DOCTYPE html>
<html>
<head>
	<title>Sliding Tabs</title>
	<style>
		@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected];500;600&display=swap");
		:root {
		  --primary-color: #185ee0;
		  --secondary-color: #e6eef9;
		}

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

		body {
		  font-family: "Inter", sans-serif;
		  background-color: #ffffff;
		}

		.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: 0px 0px 7px rgba(0, 0, 0, 0.1), 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;
		}
		.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);
		  }
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="tabs">
			<input type="radio" id="radio-1" name="tabs" checked />
			<label class="tab" for="radio-1">HTML<span class="notification">2</span></label>
			<input type="radio" id="radio-2" name="tabs" />
			<label class="tab" for="radio-2">CSS</label>
			<input type="radio" id="radio-3" name="tabs" />
			<label class="tab" for="radio-3">JavaScript<span class="notification">5</span></label>
			<span class="glider"></span>
		</div>
	</div>
</body>
</html>

Thank You!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply