In this article, we’ll show you how to create an Animated Tabs With Slide Indicator Using HTML and CSS. This type of Slide Tabs is used on the websites for Tabs. This kind of Animated Tabs looks attractive on website.
You easily create this Animated Tabs With Slide Indicator Using HTML and CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Pure CSS Tabs
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.
Watch the video tutorial to create Pure CSS Tabs
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Animated Tabs With Slide indicator step by step completely beautifully. So you can learn how to make these Pure CSS Tabs. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Pure CSS Tabs Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- How To Make Dropdown Menu Using HTML and CSS
- Responsive Image Slider Using HTML and CSS
- How To Make a Website Using HTML and CSS
Pure CSS Tabs | Source Codes
You have to create an HTML and CSS File For this Tabs. After creating these files just paste the following codes into your file.
The First Step, 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. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Slide Tabs</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!----FontAwesome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.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="fas fa-envelope"></i>Help</label>
<label for="about" class="about"><i class="fas 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. 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. praesentium dicta suscipit quisquam iure sed, nemo.</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. 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.</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. 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.</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. Est dolorum facilis, iure perferendis libero qui quasi voluptas eligendi consequatur nam sint illum, eaque adipisci sed eum numquam at incidunt minus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est dolorum facilis, iure perferendis libero qui quasi voluptas eligendi consequatur nam sint illum, eaque adipisci sed eum numquam at incidunt minus.</p>
</div>
</section>
</div>
</body>
</html>
Second Step, you have to 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.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];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: #36a7e8;
}
::selection{
background: rgb(45 166 218 / .3);
}
.wrapper{
max-width: 700px;
width: 100%;
margin: 150px 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: #36a7e8;
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: #36a7e8;
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;
}now you’ve successfully created these Pure CSS Tabs. If your code does not work or facing any error/problem to comment down or contact us through the contact page. Otherwise, you can download the source code files from the given download button.
