Hello readers, Today in this blog you’ll learn how to create Pure CSS 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. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Tabs using only HTML & CSS].
Video Tutorial of Tabs using only HTML & CSS
In the video, you have seen the Pure CSS Tabs with Slide Indicator. I hope you have understood the basic codes behind creating this tab. This tabs click animation is created using only HTML & CSS and I used HTML <input type=”radio”> and <label> tags with the label, I have controlled the radio buttons.
These program click actions are purely based or possible with an input type radio tag. If you’re a beginner and you know basic HTML & CSS then you can also create this type of pure CSS tabs and use them on your HTML pages, websites, and projects.
You might like this:
Pure CSS Tabs with Slide Indicator [Source Codes]
To create this program [Tabs using only HTML & CSS]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Tabs Design | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Pure CSS Tabs</header>
<input type="radio" name="slider" checked id="home">
<input type="radio" name="slider" id="blog">
<input type="radio" name="slider" id="code">
<input type="radio" name="slider" id="help">
<input type="radio" name="slider" id="about">
<nav>
<label for="home" class="home"><i class="fas fa-home"></i>Home</label>
<label for="blog" class="blog"><i class="fas fa-blog"></i>Blog</label>
<label for="code" class="code"><i class="fas fa-code"></i>Code</label>
<label for="help" class="help"><i class="far fa-envelope"></i>Help</label>
<label for="about" class="about"><i class="far fa-user"></i>About</label>
<div class="slider"></div>
</nav>
<section>
<div class="content content-1">
<div class="title">This is a Home content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero aspernatur nobis provident dolores molestias quia quisquam laborum, inventore quis, distinctioa, fugit repudiandae delectus sunt ipsam! Odio illo at quia doloremque fugit iops, asperiores? Consectetur esse officia labore voluptatum blanditiis molestias dic voluptas est, minima unde sequi, praesentium dicta suscipit quisquam iure sed, nemo.</p>
</div>
<div class="content content-2">
<div class="title">This is a Blog content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit amet. Possimus doloris nesciunt mollitia culpa sint itaque, vitae praesentium assumenda suscipit fugit doloremque adipisci doloribus, sequi facere itaque cumque accusamus, quam molestias sed provident quibusdam nam deleniti. Autem eaque aut impedit eo nobis quia, eos sequi tempore! Facere ex repellendus, laboriosam perferendise. Enim quis illo harum, exercitationem nam totam fugit omnis natus quam totam, repudiandae dolor laborum! Commodi?</p>
</div>
<div class="content content-3">
<div class="title">This is a Code content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, debitis nesciunt! Consectetur officiis, libero nobis dolorem pariatur quisquam temporibus. Labore quaerat neque facere itaque laudantium odit veniam consectetur numquam delectus aspernatur, perferendis repellat illo sequi excepturi quos ipsam aliquid est consequuntur.</p>
</div>
<div class="content content-4">
<div class="title">This is a Help content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit null itaq, odio repellat asperiores vel voluptatem magnam praesentium, eveniet iure ab facere officiis. Quod sequi vel, rem quam provident soluta nihil, eos. Illo oditu omnis cumque praesentium voluptate maxime voluptatibus facilis nulla ipsam quidem mollitia! Veniam, fuga, possimus. Commodi, fugiat aut ut quorioms stu necessitatibus, cumque laborum rem provident tenetur.</p>
</div>
<div class="content content-5">
<div class="title">This is a About content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia sequi aliquam. Voluptatem distinctio nemo culpa veritatis nostrum fugit rem adipisci ea ipsam, non veniam ut aspernatur aperiam assumenda quis esse soluta vitae, placeat quasi. Iste dolorum asperiores hic impedit nesciunt atqu, officia magnam commodi iusto aliquid eaque, libero.</p>
</div>
</section>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;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;
}
That’s all, now you’ve successfully created Pure CSS Tabs with Slide Indicator. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
