December 16, 2019

12 CSS Tabs

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

Related Articles

Author Ilham Ibnu Purnomo

November 22, 2019 Links demo and code 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

November 11, 2019 Links demo and code Made with HTML / CSS About a code CSS Tab Compatible browsers: Chrome, Firefox, Opera, Safari Responsive: yes Dependencies: -

Author eightarmshq

September 17, 2019 Links demo and code 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

August 22, 2017 Links demo and code 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

November 22, 2016 Links demo and code 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

September 8, 2016 Links demo and code 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

June 24, 2016 Links demo and code 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

December 5, 2015 Links demo and code 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

April 21, 2015 Links demo and code 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

October 19, 2014 Links demo and code 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

October 18, 2013 Links demo and code 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: -