Related PostsHow to style HTML5 id and class that start with a number Introduction to Myth – CSS Preprocessor 10 of The Best CSS Preprocessors to Choose From Pure CSS Popup Without a Single Line of JavaScript Code Demystifying The Concept of OOCSS

Responsive Pure CSS Tabs

demo download

Okay, so we are going to make responsive pure css tabs or Tabbed navigation which is quite interactive when it comes to quickly accessible content. It can be used in dashboards, product page etc. So, let’s straight jump in to our mark-up.

We are going to make it with the help of Radio buttons. We will also use font awesome icons to make it look good. Let’s say we need 5 tab for 5 different menus. Our mark-up will be like:

<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><i class="fa fa-code"></i><span>Code</span></label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2"><i class="fa fa-pencil-square-o"></i><span>About</span></label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3"><i class="fa fa-bar-chart-o"></i><span>Services</span></label>

<input id="tab4" type="radio" name="tabs">
<label for="tab4"><i class="fa fa-folder-open-o"></i><span>Portfolio</span></label>

<input id="tab5" type="radio" name="tabs">
<label for="tab5"><i class="fa fa-envelope-o"></i><span>Contact</span></label>

We will hide the input boxes, you can either hide it through



position: absolute; top:-9999; left:-9999;

input {
  display: none;
label {
  display: block;
  float: left;
  width: 20%;
  color: #757575;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: #f0f0f0;

Now let’s put content for each tab and give each section a specific ID.

<section id="content1" class="tab-content">
<!--content goes here-->
<section id="content2" class="tab-content">
<!--content goes here-->
<section id="content3" class="tab-content">
<!--content goes here-->
<section id="content4" class="tab-content">
<!--content goes here-->
<section id="content5" class="tab-content">
<!--content goes here-->

We need to first hide the content inside of each section, as

section {
  display: none;

Now we have to display the content when a particular tab is checked, for this situation our CSS code will be

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;

Okay, it was the functional part, how about some animation, and styling and Of course, let’s also not forget that we have to make it responsive as well. Since we have to highlight each selected tab and label, we can do it as below,

.tab_container [id^="tab"]:checked + label {
  background: #fff;
  box-shadow: inset 0 3px #0CE;


We can hide the name of the tab instead let’s only show icon for the tab when the screen size is less than 900px and let’s also expand the width of the container little bit.

@media only screen and (max-width: 900px) {
  label span {
    display: none;
  .tab_container {
    width: 98%;


We can make our content interactive, by adding kind of scale and fade animation. First we will create the animation

@keyframes fadeInScale {

  0% { 
  	transform: scale(0.9);
  	opacity: 0;

  100% { 
  	transform: scale(1);
  	opacity: 1;

Now we will apply it to paragraph and heading tag of the content.

.tab_container .tab-content p,
.tab_container .tab-content h3 {
  -webkit-animation: fadeInScale 0.7s ease-in-out;
  -moz-animation: fadeInScale 0.7s ease-in-out;
  animation: fadeInScale 0.7s ease-in-out;

demo download

6 Replies to “Responsive Pure CSS Tabs”

  1. shanza irfan

    you are amazing… just loving your work….im also learning web development…..i want to learn all these skills specially animations n popups… are very skillfull…(y)
    keep it up….:-)

  2. endzeitH

    Hi, gooooood work πŸ™‚
    But can you tell me, why in firefox the animation only works once clicking the tab?
    When clicking the same tab a second time, the content only “appears” – without any animation…
    I have the same problem on my website. Nearly all browsers are working well- it seems to be a firefox-problem. Is it possible to fix it?

  3. Tasha

    Brilliant! Dare I say this works better than Chris Coyier’s version of CSS Tabs!

    I just wanted to ask, do you have any ideas when it comes to making the current tab (label) active?

    • Juergen

      @ Tasha

      #tab1:checked ~ #content1 will select the element with id=”content1″ in case element with id=”tab1″ is checked. In this case display is changed from none (see section {display: none;} to block (see #tab1:checked ~ #content1 {display: block;} and therefore tab contents content1 is revealed.

  4. Juergen

    position: absolute; top:-9999; left:-9999; does not hide anything (radio buttons are positioned on top of the labels) but using position: absolute; top:-9999px; left:-9999px; will hide the radio buttons. The difference compared to hiding by display: none is, that it is still possible to focus/change by keyboard but of course the browser tries to move the radio button into the visible area meaning page will jump.

  5. George Koutras

    Great article. One question however. I will need to have the menu fixed while scrolling. Any idea how to do this? Thank you for your help…

Leave a Reply

Your email address will not be published. Required fields are marked *