Tabs Navigation Using HTML and CSS (Source Code)

 

Welcome to the Codewithrandom blog. In this blog, We learn how to Create Tabs Navigation. We use HTML and CSS Only to create this Tabs Navigation Animation.

I hope you enjoy our blog so let’s start with a basic html structure for Tabs Navigation.

HTML Code For Tabs Navigation

<div class="container">
<div class="tabs">
<input type="radio" id="radio-1" name="tabs" checked />
<label class="tab" for="radio-1">Home</label>
<input type="radio" id="radio-2" name="tabs" />
<label class="tab" for="radio-2">About</label>
<input type="radio" id="radio-3" name="tabs" />
<label class="tab" for="radio-3"> Contact Us</label>
<span class="glider"></span>
</div>
</div>

There is all the html code for the Tabs Navigation. Now, you can see output without CSS, then we write Css for styling and give animation on tabs change.

Portfolio Website using HTML and CSS (Source Code)

Output

Output

CSS Code For Tabs Navigation

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;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: rgba(230, 238, 249, 0.5);
}

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

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

We have completed our Tabs Navigation Project. Here is our final updated output HTML + CSS.

Final Output Of Tabs Navigation Using HTML and CSS

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

We have completed our Tabs Navigation. Here is our updated output with HTML and CSS. I hope you like the Tabs Navigation. You can see output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create Tabs Navigation Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki