Html css tabs code | tab navigation css - codewithrandom

Html css tabs code |  tab navigation css - codewithrandom

Html css tabs code |  tab navigation css - codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn that how to create html css tabs. We use HTML & CSS  for this simple html css tabs. Hope you enjoy our blog so let's start with a basic HTML structure for html css tabs.

HTML code

 <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 HTML code for the html css tabs. Now, you can see output without CSS, then we write CSS for html css tabs.
Output
Html css tabs code |  tab navigation css - codewithrandom
Output

CSS(Scss) code

 @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(#e6eef9, 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(#185ee0, 0.15), 0 6px 12px 0 rgba(#185ee0, 0.15);  
      padding: 0.75rem;  
      border-radius: 99px; // just a high number to create pill effect  
      * {  
           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; // just a high number to create pill effect  
      cursor: pointer;  
      transition: color 0.15s ease-in;  
 }  
 input[type="radio"] {  
      &:checked {  
           & + label {  
                color: var(--primary-color);  
                & > .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; // just a high number to create pill effect  
      transition: 0.25s ease-out;  
 }  
 @media (max-width: 700px) {  
      .tabs {  
           transform: scale(0.6);  
      }  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Html css tabs code |  tab navigation css - codewithrandom

Now we have completed our CSS section,  Here is our updated output with  CSSHope you like the html css tabs, 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 html css tabs using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

4 Comments

  1. guys thanks for this codes... it is really very very helpful for me..

    ReplyDelete
  2. great codes ... it is very important for my next project bro...

    ReplyDelete
  3. a big thanks from small fan bro... it is really a great code.. i definetly going to use it on my next project...

    ReplyDelete

Post a Comment

Previous Post Next Post