FreeFrontend

18 CSS Tabs

February 28, 2017 | 8 Minute Read

Collection of HTML and CSS tabs with little JavaScript. Demo and download code (*zip).

Demo Image: Flying Cards Tabs
Flying Cards Tabs (demo image)

Flying Cards Tabs

Flying cards tabs in HTML, CSS and JavaScript.
Made by Nora
February 6, 2017

download demo and code

See the Pen Flying cards tabs by Nora (@interstellar) on CodePen.

Demo Image: Light Tabs
Light Tabs (demo image)

Light Tabs

Light tabs with HTML, CSS and JavaScript.
Made by Alex Lime
February 1, 2017

download demo and code

See the Pen Light & Sexy Tabs by Alex Lime (@CoffeeCupDrummer) on CodePen.

Demo Image: CSS Tabs
CSS Tabs (demo image)

CSS Tabs

HTML and CSS tabs.
Made by massimo
December 11, 2016

download demo and code

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

Demo Image: CSS3 Tabs
CSS3 Tabs (demo image)

CSS3 Tabs

CSS3 Tabs by Sorax. Original: http://jsbin.com/uworip/59
Made by YozhEzhi
December 5, 2016

download demo and code

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

Demo Image: Pure CSS Tabs
Pure CSS Tabs (demo image)

Pure CSS Tabs

Just CSS, no JS!
Made by Wallace Erick
November 26, 2016

download demo and code

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

Demo Image: Pure CSS Tabs With Indicator
Pure CSS Tabs With Indicator (demo image)

Pure CSS Tabs With Indicator

HTML and CSS tabs with indicator.
Made by Alex
September 8, 2016

download demo and code

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

Demo Image: Tab UI
Tab UI (demo image)

Tab UI

Tab UI with HTML, CSS and JavaScript.
Made by Hilo
July 8, 2016

download demo and code

See the Pen Tab UI by Hilo (@hilotacker) on CodePen.

Demo Image: CSS Tabs
CSS Tabs (demo image)

CSS Tabs

It's another experiment to make tabs without JavaScript.
Made by Flkt Crnpio
June 24, 2016

download demo and code

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

Demo Image: Tabs
Tabs (demo image)

Tabs

HTML, CSS and JavaScript tabs.
Made by Nikita Jadhao
June 10, 2016

download demo and code

See the Pen Tabs by Nikita Jadhao (@jdniki) on CodePen.

Demo Image: Pure CSS Color Tabs
Pure CSS Color Tabs (demo image)

Pure CSS Color Tabs

HTML and CSS color tabs.
Made by ari
December 14, 2015

download demo and code

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

Demo Image: Adaptive tabs
Adaptive tabs (demo image)

Adaptive tabs

Tabs that animate to the height of their content when switched.
Made by Lewi Hussey
June 28, 2015

download demo and code

See the Pen Adaptive tabs by Lewi Hussey (@Lewitje) on CodePen.

Demo Image: Material Design Tabs
Material Design Tabs (demo image)

Material Design Tabs

Material Design CSS only tabs.
Made by Ben Mildren
April 23, 2015

download demo and code

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

Demo Image: Material Expanding Overlay - Top-Aligned Tabs
Material Expanding Overlay - Top-Aligned Tabs (demo image)

Material Expanding Overlay - Top-Aligned Tabs

HTML, CSS and JavaScript material expanding overlay - yop-aligned tabs.
Made by Tony Tomlinson
April 6, 2015

download demo and code

See the Pen Material Expanding Overlay - Top-Aligned Tabs by Tony Tomlinson (@ibb) on CodePen.

Demo Image: Transformer Tabs
Transformer Tabs (demo image)

Transformer Tabs

RWD n stuff! One set of semantic HTML. One set of JS. Tabs that turn into a small-screen-capable tap-to-reveal fully-functional system.
Made by Chris Coyier
December 11, 2014

download demo and code

See the Pen Transformer Tabs by Chris Coyier (@chriscoyier) on CodePen.

Demo Image: Responsive CSS Tabs
Responsive CSS Tabs (demo image)

Responsive CSS Tabs

HTML and CSS responsive tabs.
Made by Oliver Knoblich
May 21, 2014

download demo and code

See the Pen Responsive CSS Tabs by Oliver Knoblich (@oknoblich) on CodePen.

Demo Image: Simple Tabs
Simple Tabs (demo image)

Simple Tabs

Simple HTML and CSS tabs.
Made by Srdjan Pajdic
February 9, 2014

download demo and code

See the Pen Sexy Tabs by Srdjan Pajdic (@MightyShaban) on CodePen.

Demo Image: Sliding Tab Box Things
Sliding Tab Box Things (demo image)

Sliding Tab Box Things

Just a transition-y thing for hidden content areas.
Made by Derek Wheelden
January 28, 2014

download demo and code

See the Pen Sliding Tab Box Things by Derek Wheelden (@frxnz) on CodePen.

Demo Image: CSS Tabs
CSS Tabs (demo image)

CSS Tabs

Sipmle HTML and CSS tabs.
Made by White Wolf Wizard
August 31, 2013

download demo and code

See the Pen CSS Tabs by White Wolf Wizard (@WhiteWolfWizard) on CodePen.