Tab Styles Inspiration

A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.

From our sponsor: Ship fast and never break a thing with Shortcut (formerly

Today we’d like to share a couple of tab styles with you. The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become.

For the demo we’ve used a flexbox layout so make sure you view it with a modern browser.

The icons in most of the tabs are from the fantastic Elegant Themes Line Icon Set and we’ve used the Icomoon app to create our custom icon font.

For the tab functionality we’ve used the Blueprint Responsive Full Width Tabs and adjusted it for our needs.

The main common tab style for all tabs can be found in tabs.css and all individual styles are in tabstyles.css

Take a look at some of the examples:





There are a couple of example media queries and fallbacks that can be customized. We’ve opted for showing icons only on smaller screens (see the Blueprint) or a horizontal stack where it makes sense.

We hope you enjoy these styles and get inspired 🙂

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 79

Comments are closed.
  1. Hi, Can you explain, how to use Trapezoid tab inside the undeline tab. Its not working for me

  2. Dear Mary, thank you for all resources you give us, and thank you for making a well designed web with this tutorials and demos.

    Few days ago I was wondering how to set a tab directly from URL, for example, so I did a trick with another plugin wich detects change on the url with the Hash(#). I will let know others users how they could implement in their websites.

    Step 1: Go to this site and download the minified version of jQuery HashChange Plugin. So once downloaded, set it inside of footer of your web with tag.

    Step 2:
    Paste the following code in your website or in some or your js files.

    $(document).ready(function(){ // Cambiamos la pestaña con el plugin $(window).hashchange( function(){ // Seleccionamos el Hash de la URL var hash = location.hash; // Ahora simulamos el Click $('.tabs nav ul li a[href='+hash+']').parent('li').trigger('click'); }); // En caso de que la URL sea llamada directamente, Llamamos nuevamente el plugin $(window).hashchange(); });

    And that should do the trick.


  3. Hi Guys,
    Awesome design and cool. But how can ? add this css to visual composer(wordpress) on my page. I want to change visual composer tab design to this design. I downloaded source and paste theme/css/TabStylesInspiration. But ? don’t refer on my tab.
    Thank you.

  4. Hey thank you for your work. These are great tabs. All the rest are just simple and common tabs 🙂

    Unfortunately I just found a problem with tabs-style-linemove. It works great, till you put more tabs… let’s say the sixth tab. When you do that the green underline that “follows” the selected tab loses it’s track and start to focus 1 tab ahead of where it show be. The other types of tabs don’t seem to have the problem.

    There is one thing more, not a big deal but still. I noticed (and it works for all the tabs) that the tabs anchor points to a section right!? But no matter what you put on the tabs href or section ids the sections will always show up in the HTML order they are coded.

    Sorry if I was not clear enough but hope this helps. And thanks again!

  5. How I can insert the tab on WordPress ? A post explaining the next steps would be very useful.

  6. hey, the tabs in file contain 5 section but when i loose one or minimize it to 4 tabs than the css of tabs get effected on focus events can u help me out …how to do the same thing with 4tabs on linemove tabs