30 Beautiful CSS Tabs (Free Code Included)
Enjoy these clean, minimal CSS tabs. They are sure to make your website look great and wow your users. Navigation tabs are important for your site's UX.
1. CSS Tab
Using radio buttons to make a tab navigation in only CSS.
Author: Wendy (Wendy-Ho)
Links: Source Code / Demo
Created on: November 11, 2019
Made with: HTML, CSS
Tags: css-tab, tab, tabs, panel, pure-css
2. Purple Bootstrap CSS Tabs
Author: Ross Nicholls (Codchunks)
Links: Source Code / Demo
Created on: September 20, 2019
Made with: HTML, SCSS, JS
3. Nav Tab
Author: Ilham Ibnu Purnomo (inupurnomo)
Links: Source Code / Demo
Created on: November 22, 2019
Made with: HTML, CSS
4. Tabs. Pitaya CSS
Author: Flkt Crnpio (flkt-crnpio)
Links: Source Code / Demo, Flkt.mx
Created on: June 24, 2016
Made with: HTML, CSS
Tags: html, css, tabs, pitaya
5. Pure CSS Tabs
Author: Mark Caron (markcaron)
Links: Source Code / Demo
Created on: August 22, 2017
Made with: HTML, CSS
6. Material Design CSS Only Tabs
Author: Ben Mildren (mildrenben)
Links: Source Code / Demo
Created on: April 21, 2015
Made with: HTML, SCSS
7. Pure CSS Tabs
Author: Mark Caron (markcaron)
Links: Source Code / Demo
Created on: August 22, 2017
Made with: HTML, CSS
8. Pure CSS Tabs With Indicator
Author: Alex (woranov)
Links: Source Code / Demo
Created on: September 8, 2016
Made with: HTML, SCSS
Tags: css, pure, only, tabs, responsive
9. Pure CSS Color Tabs
Author: ari (tari)
Links: Source Code / Demo, Colorhunt.co
Created on: December 5, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: tabs, pure-css
10. CSS3 Tabs
Author: YozhEzhi (YozhEzhi)
Links: Source Code / Demo, Jsbin.com
Created on: October 19, 2014
Made with: HTML, SCSS
Tags: css3 sorax
11. Pure CSS Tabs
Just CSS, no JS!
Author: Wallace Erick (wallaceerick)
Links: Source Code / Demo
Created on: October 5, 2013
Made with: HTML, SCSS
Tags: css, tabs, pure, just, experiment
12. Tab Controls Using HTML And CSS, No JS!
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...Read More
Author: Nicolas Bevacqua (bevacqua)
Links: Source Code / Demo
Created on: October 18, 2013
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: tabs, ui, stylus, jade
13. Pure Css Responsive Tabs
Simple, clean and pure css responsive tabs. Update: I've added some simple effects for tab body transitions - checkout the commented parts of scss code.
Author: Martin Gajdičiar (Fallupko)
Links: Source Code / Demo
Created on: May 22, 2013
Made with: HTML, SCSS, JS
14. Simple Pure Css Tabs
You only need css.
Author: Sean B (Chesswithsean)
Links: Source Code / Demo
Created on: March 28, 2018
Made with: HTML, SCSS
Tags: css, radio, tabs
15. Multi Colored Responsive Tabs (Simple HTML & CSS) * No JavaScripe
A good old fashioned HTML Tab that you can change and use on the fly.
Author: brimleal (yo_i_am_cuban_b)
Links: Source Code / Demo
Made with: HTML, CSS
16. HTML And CSS Only Login Form With Tabs And Simple Input Animation
Watch the step by step tutorial in Youtube - https://www.youtube.com/watch?v=dok2xAaheWk
Author: Yor (yorsaquing)
Links: Source Code / Demo
Created on: August 25, 2020
Made with: HTML, SCSS
Tags: tabs, form, input, css, html
17. Pure CSS Tabs With Indicator
Author: Tatiane Gabrielle (tatishinoda)
Links: Source Code / Demo
Made with: HTML, SCSS
18. Tabs Using HTML And CSS | Pure CSS Animated Tabs
Tabs Using HTML and CSS | Pure CSS Animated Tabs
Author: Okba Design (Okba-Design)
Links: Source Code / Demo
Created on: July 26, 2020
Made with: HTML, CSS
Tags: tabs, using, html, css, pure
19. Pure CSS Tabs
Create Tabs in Pure CSS without the needing of additional JavaScript!
Author: Codepalm (Codepalm)
Links: Source Code / Demo
Made with: HTML, SCSS
20. CSS Tabs With JS Functionality
Tabs with inverted borders creating a smooth appearance with JS to change active tab
Author: Jacob Evans (jwepdx)
Links: Source Code / Demo
Created on: June 23, 2020
Made with: HTML, SCSS, Babel
Tags: tabs, css, js, html, tab
21. Simple CSS Tabs
Author: Kelvin Jose Pinto (kelvinjosepinto)
Links: Source Code / Demo
Made with: HTML, CSS
22. CSS Tabs
Author: Vicki Chen (MissesVickies)
Links: Source Code / Demo
Created on: May 14, 2020
Made with: HTML, CSS
Tags: tabs, css, paginations
23. Responsive Tabs
using aria attributes instead of classes for functionality - idea from and hat tip to Wes Bos
Author: Levente Molnar (leventemo)
Links: Source Code / Demo
Created on: May 16, 2020
Made with: HTML, SCSS, JS
Tags: tabs, responsive, accessible
24. Pure Scss Accordion Tabs
Accordion tabs without js. This tabs have responsive design.
Author: Ashok (AshokRajendran)
Links: Source Code / Demo
Created on: August 19, 2020
Made with: HTML, SCSS
Tags: responsive, accordion, tabs, scss, purescss
25. Pure CSS Tabs
Just CSS, no JS!
Author: hyuuuuuuuuuuuk (hyuuuuuuuuuuuk)
Links: Source Code / Demo
Created on: August 17, 2020
Made with: HTML, SCSS
Tags: css, tabs, pure, just, experiment
26. Pure CSS Tabs
CSS tabs using @each directive.
Author: Chen Hui Jing (huijing)
Links: Source Code / Demo
Created on: November 12, 2015
Made with: HTML, SCSS
Tags: css, tabs, responsive, scss
27. CSS Tabs Menu
The CSS Tabs Menu are fully responsive with all kind of devices. These CSS Tabs Menu are created only with css, there is no JavaScript.
Author: codeconvey (codeconvey)
Links: Source Code / Demo
Created on: December 19, 2014
Made with: HTML, CSS
Tags: tabs, menu, css, form
28. CSS Tabs Revisited
CSS tabs with some flair
Author: Eric Sadowski (ejsado)
Links: Source Code / Demo
Created on: February 23, 2016
Made with: HTML, CSS
Tags: css, tabs
29. Ii Just Another CSS Tabs (:checked)
Author: Kseso (Kseso)
Links: Source Code / Demo
Created on: December 4, 2013
Made with: HTML, CSS, JS
Tags: tabs, css
More Awesome Lists:
Share: