Slide Indicator | Tabs using only HTML & CSS

 

Hello readers, Today in this blog you'll learn how to create Tabs with Indicator using only HTML & CSS. Earlier I have shared a blog on how to create Active Tabs Click Animation with Icons and now it's time to create Tabs with Slide Indicator.

A tabbed interface or simply a tab is a graphical control element one can use to contain multiple panels or documents onto a single window for users to access. CSS tabs are the easiest way to attract more to your users.

In this program [Pure CSS Tabs with Slide Indicator], on the webpage, there is the content box with tabs and each tab have there own content. These tabs have click events or actions that means when you click on the particular tab then there is shown the content of your current or active tab.

CSS Code @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ overflow: hidden; padding: 0 20px; background: #17a2b8; } ::selection{ background: rgba(23,162,184,0.3); } .wrapper{ max-width: 700px; width: 100%; margin: 200px auto; padding: 25px 30px 30px 30px; border-radius: 5px; background: #fff; box-shadow: 0px 10px 15px rgba(0,0,0,0.1); } .wrapper header{ font-size: 30px; font-weight: 600; padding-bottom: 20px; } .wrapper nav{ position: relative; width: 80%; height: 50px; display: flex; align-items: center; } .wrapper nav label{ display: block; height: 100%; width: 100%; text-align: center; line-height: 50px; cursor: pointer; position: relative; z-index: 1; color: #17a2b8; font-size: 17px; border-radius: 5px; margin: 0 5px; transition: all 0.3s ease; } .wrapper nav label:hover{ background: rgba(23,162,184,0.3); } #home:checked ~ nav label.home, #blog:checked ~ nav label.blog, #code:checked ~ nav label.code, #help:checked ~ nav label.help, #about:checked ~ nav label.about{ color: #fff; } nav label i{ padding-right: 7px; } nav .slider{ position: absolute; height: 100%; width: 20%; left: 0; bottom: 0; z-index: 0; border-radius: 5px; background: #17a2b8; transition: all 0.3s ease; } input[type="radio"]{ display: none; } #blog:checked ~ nav .slider{ left: 20%; } #code:checked ~ nav .slider{ left: 40%; } #help:checked ~ nav .slider{ left: 60%; } #about:checked ~ nav .slider{ left: 80%; } section .content{ display: none; background: #fff; } #home:checked ~ section .content-1, #blog:checked ~ section .content-2, #code:checked ~ section .content-3, #help:checked ~ section .content-4, #about:checked ~ section .content-5{ display: block; } section .content .title{ font-size: 21px; font-weight: 500; margin: 30px 0 10px 0; } section .content p{ text-align: justify; }
HTML Code