Collection of free HTML and pure CSS tabs. Update of May 2018 collection.

12 CSS Tabs

Collection of free HTML and pure CSS tabs. Update of May 2018 collection.

Related Articles

  1. JavaScript Tabs
  2. jQuery Tabs
  3. React Tabs
  4. Vue Tabs

Author

  • Ilham Ibnu Purnomo

Made with

  • HTML / CSS

About a code

Nav Tab

Navigation tabs for two forms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Author

  • Wendy

Made with

  • HTML / CSS

About a code

CSS Tab

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • eightarmshq

Made with

  • HTML / CSS (SCSS)

About a 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mark Caron

Made with

  • HTML / CSS

About a 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • massimo

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Tabs

Pure CSS vertical tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alex

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Tabs With Indicator

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Flkt Crnpio

Made with

  • HTML / CSS

About a code

Animated Transition Tabs

Animated transition tabs with checkboxes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • ari

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Color Tabs

No label pure CSS color tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ben Mildren

Made with

  • HTML / CSS (SCSS)

About a code

CSS Only Tabs

Material Design CSS only tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • YozhEzhi

Made with

  • HTML / CSS (SCSS)

About a code

CSS3 Tabs

Responsive pure CSS3 tabs by Sorax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Nicolas Bevacqua

Made with

  • HTML (Pug) / CSS (Stylus)

About a 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Wallace Erick

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Tabs

Just HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

back to top