ADVERTISEMENT

Create Animated Tabs Using HTML and CSS

Telegram Group Join Now

ADVERTISEMENT

Create Animated Tabs Using HTML and CSS

In this article, we create an Animated Tab Bar using HTML and CSS Code. We use an iconic animation in the tab bar, when you hover the lighting and all effect are just awesome👏. So let’s start coding for our tab bar using HTML and Css.

ADVERTISEMENT

ADVERTISEMENT

We write html coding first for creating structure than later styling using css.

Html Code For Tabs

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iconic Tab Bar - Pure CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="menu">

    <input type="radio" name="nav-item" id="m-home" checked><label for="m-home">Home</label>
    <input type="radio" name="nav-item" id="m-search"><label for="m-search">Search</label>
    <input type="radio" name="nav-item" id="m-notification"><label for="m-notification">Notification</label>
    <input type="radio" name="nav-item" id="m-favorites"><label for="m-favorites">Favorites</label>
    <input type="radio" name="nav-item" id="m-profile"><label for="m-profile">Profile</label>

    <div class="selector"></div>
  </nav>
</body>

</html>

So you are just amazed by seeing our html code. All this html code is in menu div and in div we use the input type radio button for our tab bar using html css.

ADVERTISEMENT

50+ Html ,Css & Javascript Projects With Source Code

ADVERTISEMENT

So actually we clicked on the tab bar and after using css we completely styled and gave a clicking effect. So that’s it all for html code.

Here is the output with only code then we style using css.

Html Code Output

ADVERTISEMENT

Create Animated Tabs Using HTML and CSS
Animated Tabs Using HTML and CSS

 

Let’s Writing Css Code To Styling Our Animated Tabs.

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

ADVERTISEMENT

CSS Code For Tabs

:root {
  --icon: #b0bfd8;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  background-color: #e3efe8;
  background-image: linear-gradient(315deg, #e3efe8 0%, #96a7cf 74%);
}

nav.menu {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 150px;
  padding: 0 29px 10px;
  background: #fff0;
  align-items: flex-end;
  width: 600px;
}

nav.menu:before {
  content: "";
  width: 100%;
  height: 150px;
  background: #181818;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 20px;
  z-index: -1;
  box-shadow: 1px 1px 2px 0px #fff;
}

input {
  display: none;
}

label {
  text-decoration: none;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  min-width: 100px;
  height: 100px;
  margin: 10px 10px 20px;
  text-align: center;
  display: inline-grid;
  align-items: end;
  color: #b0bfd8;
  position: relative;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  cursor: pointer;
}

label:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff;
}

input:checked + label {
  color: #fff;
  height: 130px;
}

.selector {
  --hole: #2196f3;
  background: radial-gradient(
      circle at 50% 50%,
      #fff8 30px,
      #fff0 45px,
      #fff 50px,
      #fff0 50px 100%
    ),
    radial-gradient(circle at 50% 50%, var(--hole) 0 45px, #fff0 50px 100%),
    radial-gradient(circle at 50% 75px, #181818 0 70px, #fff0 71px 100%);
  width: 95px;
  height: 95px;
  position: absolute;
  bottom: 47px;
  left: 0;
  z-index: -1;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  border: 19px solid #181818;
  border-radius: 100%;
}

#m-home:checked ~ .selector {
  left: 23px;
}

#m-search:checked ~ .selector {
  left: 143px;
  filter: hue-rotate(535deg);
}

#m-notification:checked ~ .selector {
  left: 263px;
  filter: hue-rotate(950deg);
}

#m-favorites:checked ~ .selector {
  left: 383px;
  filter: hue-rotate(1580deg);
}

#m-profile:checked ~ .selector {
  left: 502px;
  filter: hue-rotate(1850deg);
}

.selector:after {
  content: "";
  position: absolute;
  bottom: -80px;
  width: 80px;
  height: 10px;
  background: #181818;
  left: calc(50% - 40px);
  border-radius: 5px 5px 15px 15px;
}

input:checked ~ .selector:after {
  box-shadow: 0 -17px 35px 8px var(--hole);
}

/*** ICONS ***/
label:before,
label:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  transition: all 0.5s ease 0s;
}

label:hover:before,
label:hover:after {
  filter: brightness(1.5) drop-shadow(0px 0px 4px #fff);
  transition: all 0.5s ease 0s;
}

input:checked + label:before,
input:checked + label:after {
  filter: brightness(1.5) drop-shadow(0px 0px 2px var(--sel));
  transition: all 0.5s ease 0s;
}

label[for="m-home"]:before {
  width: 40px;
  height: 40px;
  left: 30px;
  top: 30px;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  border-radius: 2px;
  background: conic-gradient(
      from 90deg at 65% 60%,
      var(--icon) 0 25%,
      #fff0 0 100%
    ),
    conic-gradient(from 180deg at 35% 60%, var(--icon) 0 25%, #fff0 0 100%),
    conic-gradient(from 135deg at 50% 0%, var(--icon) 0 25%, #fff0 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 27px;
}

label[for="m-home"]:after {
  width: 40px;
  height: 40px;
  left: 30px;
  top: 24px;
  border: 6px solid var(--icon);
  border-right-width: 0;
  border-bottom-width: 0;
  transform: rotate(45deg);
  border-radius: 5px;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}

label[for="m-search"]:before {
  width: 40px;
  height: 40px;
  left: 20px;
  top: 17px;
  border: 6px solid var(--icon);
  border-radius: 100%;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}

label[for="m-search"]:after {
  width: 22px;
  height: 9px;
  left: 60px;
  top: 50px;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  background: var(--icon);
  transform-origin: left top;
  transform: rotate(45deg);
  border-radius: 0 10px 10px 0;
}

label[for="m-notification"]:before {
  width: 50px;
  height: 42px;
  left: 25px;
  top: 20px;
  z-index: 1;
  border-radius: 30px 30px 0 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  background: linear-gradient(
      90deg,
      #fff0 0 6px,
      var(--icon) 0 calc(100% - 6px),
      #fff0 calc(100% - 6px) 100%
    ),
    conic-gradient(from 135deg at 50% 33%, var(--icon) 0 25%, #fff0 0 100%);
}

label[for="m-notification"]:after {
  width: 10px;
  height: 57px;
  left: 45px;
  top: 14px;
  z-index: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  background: radial-gradient(
      circle at 50% 6px,
      var(--icon) 3px,
      #fff0 4px 100%
    ),
    #fff0;
  transform-origin: left top;
  border-bottom: 6px solid var(--icon);
  border-radius: 5px;
}

label[for="m-favorites"]:before {
  width: 50px;
  height: 50px;
  left: 18px;
  top: -9px;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  background: radial-gradient(
      circle at 16px 16px,
      var(--icon) 0 16px,
      #fff0 calc(16px + 1px) 100%
    ),
    radial-gradient(
      circle at 34px 34px,
      var(--icon) 0 16px,
      #fff0 calc(16px + 1px) 100%
    ),
    linear-gradient(45deg, var(--icon) 0 37px, #fff0 38px 100%);
  border-radius: 17px 22px 17px 4px;
  transform: rotate(-45deg);
  transform-origin: center right;
}

label[for="m-profile"]:before {
  width: 50px;
  height: 54px;
  top: 16px;
  background: radial-gradient(
      circle at 50% 15px,
      var(--icon) 0 12px,
      #fff0 13px 100%
    ),
    radial-gradient(circle at 50% 100%, var(--icon) 0 22px, #fff0 23px 100%);
  left: 25px;
  border-radius: 8px;
}

input:checked + label {
  color: var(--sel);
  text-shadow: 0 0 5px var(--sel), 0 0 10px var(--sel);
}

input:checked + label[for="m-home"] {
  --sel: #39a1f4;
}

input:checked + label[for="m-search"] {
  --sel: #f48d4e;
}

input:checked + label[for="m-notification"] {
  --sel: #84a91c;
}

input:checked + label[for="m-favorites"] {
  --sel: #ff6275;
  height: 125px;
}

input:checked + label[for="m-profile"] {
  --sel: #9d74ff;
}

@media only screen and (orientation: portrait) {
  label {
    color: transparent !important;
    text-shadow: none !important;
  }
}

This is our css code for our tab bar using html css. And this css is too long. So let’s understand the overview of the whole css code.

ADVERTISEMENT

We use a simple style like creating variables using root selector in css then styling body and menu tag. For better animation and adding effect, we use before pseudo selector.

Then our complete focus on input type so we style input then style using hover selector in css🤯. Then simply we style our icon step by step like we style in 5 different ways for all icons. That’s it for our css tab bar project.

We share a screenshot and video preview so 👇 you can see how awesome👏 tab bar hover effect we made.

Portfolio Website using HTML and CSS (Source Code)

Final Output Of Tabs Using Html and Css

Create Animated Tabs Using HTML and CSS
Animated Tabs Using HTML and CSS

Live Preview Of Tabs Using Html and Css

ADVERTISEMENT

In this video 💜 we can see a big tab bar, and when we hover other 4 option it gives a shining ✨ effect. Then when we click on any tab bar menu we have an awesome color effect on this option. So guys that’s it for this project🤯 ❤.

ADVERTISEMENT

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

ADVERTISEMENT

Quiz Project Using Javascript

ADVERTISEMENT

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

ADVERTISEMENT

Code By – Josetxu

written by – Codewithrandom

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT