TOP 12 CSS Tabs

NAV TAB

Navigation tabs for two forms.

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

Author

  • Ilham Ibnu Purnomo

Made with

  • HTML / CSS

CSS TAB

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

Author

  • Wendy

Made with

  • HTML / CSS

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.

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

Author

  • eightarmshq

Made with

  • HTML / CSS (SCSS)

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.

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

Author

  • Mark Caron

Made with

  • HTML / CSS

CSS TABS

Pure CSS vertical tabs.

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

Author

  • massimo

Made with

  • HTML (Pug) / CSS (SCSS)

PURE CSS TABS WITH INDICATOR

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

Author

  • Alex

Made with

  • HTML / CSS (SCSS)

ANIMATED TRANSITION TABS

Animated transition tabs with checkboxes.

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

Author

  • Flkt Crnpio

Made with

  • HTML / CSS

PURE CSS COLOR TABS

No label pure CSS color tabs.

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

Author

  • ari

Made with

  • HTML (Pug) / CSS (SCSS)

CSS ONLY TABS

Material Design CSS only tabs.

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

Author

  • Ben Mildren

Made with

  • HTML / CSS (SCSS)

CSS3 TABS

Responsive pure CSS3 tabs by Sorax.

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

Author

  • YozhEzhi

Made with

  • HTML / CSS (SCSS)

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.

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

Author

  • Nicolas Bevacqua

Made with

  • HTML (Pug) / CSS (Stylus)

PURE CSS TABS

Just HTML and CSS.

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

Author

  • Wallace Erick

Made with

  • HTML / CSS (SCSS)

 

Post navigation