Top 12 CSS Tabs

Collection of free HTML and pure CSS tabs.

NAV TAB

Navigation tabs for two forms. Made with HTML / CSS by Ilham Ibnu Purnomo.

See the Pen
Nav Tab by Ilham Ibnu Purnomo (@inupurnomo)
on CodePen.

 Demo and Code

CSS TAB

Made with HTML / CSS by Wendy.

See the Pen
CSS Tab by Wendy (@Wendy-Ho)
on CodePen.

 Demo and Code

TABS

The + selector selects the next adjacent element. Historically this has been cool for styling labels. With CSS grid, an element can be next to another in markup, but somewhere totally different in display. This pen uses a simple input[type="radio"]:checked selector combined with a lot of +‘s to style different pages of an imaginary microsite. Made with HTML / CSS (SCSS) by eightarmshq.

See the Pen
“Next” to each other, but not _next_ to each other by eightarmshq (@EightArmsHQ)
on CodePen.

 Demo and Code

PURE CSS TABS

Radio version of tabs. Requirements: not rely on specific IDs for CSS (the CSS shouldn’t need to know specific IDs), flexible for any number of unkown tabs [2-6], accessible. Caveats: since these are checkboxes the tabs not tab-able, need to use arrow keys. Made with HTML / CSS by Mark Caron.

See the Pen
Pure CSS Tabs by Mark Caron (@markcaron)
on CodePen.

Demo and Code

CSS TABS

Pure CSS vertical tabs. Made with HTML (Pug) / CSS (SCSS) by massimo.

See the Pen
css tabs by massimo (@_massimo)
on CodePen.

 Demo and Code

PURE CSS TABS WITH INDICATOR

Made with HTML / CSS (SCSS) by Alex.

See the Pen
Pure CSS Tabs With Indicator by Alex (@woranov)
on CodePen.

 Demo and Code

ANIMATED TRANSITION TABS

Animated transition tabs with checkboxes. Made with HTML / CSS by Flkt Crnpio.

See the Pen
Tabs. Pitaya CSS by Flkt Crnpio (@flkt-crnpio)
on CodePen.

 Demo and Code

PURE CSS COLOR TABS

No label pure CSS color tabs. Made with HTML (Pug) / CSS (SCSS) by ari.

See the Pen
Pure CSS Color Tabs (no label) by ari (@tari)
on CodePen.

 Demo and Code

CSS ONLY TABS

Material Design CSS only tabs. Made with HTML / CSS (SCSS) by Ben Mildren.

See the Pen
Material Design CSS Only Tabs by Ben Mildren (@mildrenben)
on CodePen.

 Demo and Code

CSS3 TABS

Responsive pure CSS3 tabs by Sorax. Made with HTML / CSS (SCSS) by YozhEzhi.

See the Pen
CSS3 Tabs by Sorax by YozhEzhi (@YozhEzhi)
on CodePen.

 Demo and Code

TAB CONTROLS USING HTML AND CSS

Clicking on the labels is effectively the same as clicking on the input boxes. The radio inputs are hidden with CSS. When a radio is selected, their curious tab content neighbors show up. That’s it! The only drawback is you won’t be able to style the selected tab without resorting to some JS, but that shouldn’t be a very big deal. Made with HTML (Pug) / CSS (Stylus) by Nicolas Bevacqua.

See the Pen
Tab controls using HTML and CSS, no JS! by Nicolas Bevacqua (@bevacqua)
on CodePen.

 Demo and Code

PURE CSS TABS

Made with HTML and CSS by Wallace Erick.

See the Pen
Pure CSS Tabs by Wallace Erick (@wallaceerick)
on CodePen.

 Demo and Code