I have put together a whole range of different tabs (CSS) that you can use in your web projects.
Whether you are looking for inspiration or want to learn how it is done, you will for sure find something you like in this article.
Let’s jump right in, shall we!
1. Animated Tab Bar
A cool animated CSS tab bar with clickable icons.
Requires a little JS but nothing difficult. You would have to pair this tab bar with your own content: easy enough by just working out which tab is active and displaying the correct text.
2. Pure CSS Tabs
A great example of how you can create effective HTML tabs with just CSS and no JavaScript. This one will be really easy to learn from as well.
This one has cool animations for when you switch between tabs. Both on the actual tab itself and the content.
It uses HTML labels to form each tab as well, very simple.
3. Closable CSS Tabs
With a little help from JS, you can create a nice animated set of closable tabs.
Comes with a fancy animation when you close them, try it!
This one is more of a template, but it shows us how we can create tabs that have more of a purpose.
4. Animated HTML & CSS Tabs
A nice example of animated tabs using only HTML and CSS.
Clean and minimal design with nice hover animations on each tab. When you switch between tabs, it uses a fade/flash to change the text, very slick. The CSS is very well put together as well.
5. CSS Tabs With Indicator
If you are looking to create CSS tabs with icons, this one is for you.
Animated tabs with an indicator can be useful to create a minimal design but the user still knows where they are. These CSS tabs would go nicely on a product landing page to explain the different features of a product or service.
6. Card Tabs (CSS)
CSS Tabs inside of a card, with animation on change of tab.
Requires a little JS but these card designs are very popular, they are a nice way of containing information with an image or icon.
A card is a great way to present engaging information to the user and a tab allows you to maximise the space.
7. Scaling Animated Tabs (CSS)
CSS tabs with a scaling animation and example content.
Uses a fancy zoom/scaling animation to transition between tab content. Has a clean and minimal feel to it, each tab has a hover effect before clicking. This one is pure HTML and CSS tabs.
8. Animated Zooming Tabs (CSS)
Animated tabs with a zoom effect on the content – but this effect isn’t annoying because the background stays static, it is just the text that zooms in and out – The tabs themselves have their own cool animations and hover effects.
If you do not like that text effect, try with one of these CSS Text Animation examples that we have selected for you.
It is great to look at a different CSS & HTML tab design where they are not attached to the content. The little gap really gives a different feel, making the design stand out.
9. CSS Tab Filter Card
An HTML card that uses CSS and JS to create a tab filter selection.
Another great example to see how content using CSS tabs can be filtered to display what is needed. The tabs themselves have a subtle hover effect and the content switches with no animation, so it is very snappy.
You can use this example to see how something might be used in the real world, just look at those online status indicators!
10. Flexbox Based CSS Tabs
Fully responsive CSS tabs that work without any JS.
Reduces down to accordion-style tabs on mobile and small screens. It has a subtle fade animation when you switch between the tabs.
If you are interested in CSS accordions check out our list with the best CSS only accordions.
11. Simple Flat Tabs (CSS)
Simple but effective CSS tabs with a minimal style. No fancy animations, just a clean design. Works well and the tabs have a minimal hover effect. Perfect for a flat-design website.
12. Minimal CSS Tab Design
Minimal and flat themed CSS only tabs.
Simple hover tab effect with snappy content switching. Even though the design and colour choice is very mutual, this could easily be changed to fit your own brand/style. This CSS and HTML tab is really well coded.
13. Variable Height Tabs (CSS)
A good example of CSS tabs with variable content height.
Clean and minimal design to use as well. It uses a smooth fade transition between content. The whole tab element also uses a fancy shadow hover effect, letting the user know they are interacting with it.
14. Set Of Different CSS Tabs
A nice selection of different CSS tabs Responsive, centred and sticky tabs, etc.
This CodePen comes with a whole range of CSS tab examples, different styles, tab indicators and backgrounds. Requires a little JS to work but the active tab can be changed using JS, great if you need to activate a tab from another event.
Take a look!
15. Centred Tabs (CSS)
Centred CSS tabs with no JS.
A simple fade transition between tab content and each tab has its own indicator when selected based on the background colour.
This CSS tab example would go nicely on a landing or product page, helping maximise the space in one area. You can easily change the colours to fit your brand/style.
16. CSS Tabs Menu
CSS tabs menu with content and forms.
Uses a quick fade transition between tab content and has a range of example content within each one, showing how it could be used in a real website.
Great to learn from and adapt to your own brand/style.
17. Responsive CSS Tabs With Icons
Fully responsive CSS tabs with icons that use a minimal design and layout. A nice top indicator as well on each selected tab. A great example of how vertical height can be taken into account.
18. CSS Tab Portfolio Example
A well put together CSS tab bar which changes the content below in the style of a portfolio website.
This example shows us how CSS tabs are extremely useful in the real world, even the actual items in the tab content are working.
Each card in the tab content has its own tags and buttons, even a hover effect to bring them up. Very impressive design and real-world use case. Uses a fade animation transition to go between content.
If you like to add hover effects to your tabs buttons, we recommend you this list of the best CSS button hover effects.
It is also a great example to learn how you can only display certain elements with certain tags using JS.
19. User Menu CSS Tabs
A cool CSS tab menu that uses a lovely gradient as the background.
Comes with an example of UI input elements allowing you to see how it could be used in a real web app. There is no transition between tab content, so everything feels very snappy.
20. Responsive Tabs That Scale Down
A pure HTML and CSS Tab example of a responsive design that uses tabs and a nice animated slide down menu.
These tabs will scale down to a mobile-style menu when the screen gets too small. It is very impressive that this has all been achieved without any JS! The tabs have a lovely hover effect and an indicator on top.
Takeaway
We’ve seen some great examples and each one offers something different. From responsive designs to fancy CSS animations and transitions, there is something for everyone.
Take these examples and easily adapt them to your own brand or style! Tabs are a great way to display a lot more content in one area or to create an intuitive UI layout.
Do you like the idea of tabs but fancy something a bit more different? Have you got lots of content you want to display but need something more flexible and eye-catching? As an amazing alternative to CSS tabs, you can display your content using fullPage.js
FullPage.js is a full-featured JavaScript library that you can use to create unique and powerful full-screen scrollable websites. With fullPage.js you’ll quickly be building highly-polished sites that are up there with the most impressive websites – it is a library that is already used by reputable companies like EA, Sony, and eBay! –
Compatible with the latest software and website editors like Gutenberg and Elementor, you will surely be able to create something unique.
