{"id":5164,"date":"2022-01-21T01:00:00","date_gmt":"2022-01-21T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/html-css-tabs\/"},"modified":"2024-09-26T03:36:47","modified_gmt":"2024-09-26T01:36:47","slug":"html-css-tabs","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/html-css-tabs\/","title":{"rendered":"20 Cool HTML &#038; CSS Tabs [Examples]"},"content":{"rendered":"\n<p>I have put together a whole range of different <strong>tabs (CSS)<\/strong> that you can use in your web projects.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Let\u2019s jump right in, shall we!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-01-21\/best-html-and-css-tabs-examples.jpeg\" alt=\"Best HTML and CSS Tabs Examples\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1.-animated-tab-bar\">1. Animated Tab Bar<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWeLOqE\" data-src=\"\/\/codepen.io\/anon\/embed\/XWeLOqE?height=450&amp;theme-id=1&amp;slug-hash=XWeLOqE&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWeLOqE\" title=\"CodePen Embed XWeLOqE\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XWeLOqE\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A cool animated CSS tab bar with clickable icons.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2.-pure-css-tabs\">2. Pure CSS Tabs<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwLzvxz\" data-src=\"\/\/codepen.io\/anon\/embed\/RwLzvxz?height=450&amp;theme-id=1&amp;slug-hash=RwLzvxz&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwLzvxz\" title=\"CodePen Embed RwLzvxz\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwLzvxz\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>This one has cool animations for when you switch between tabs. Both on the actual tab itself and the content.<\/p>\n\n\n\n<p>It uses HTML labels to form each tab as well, very simple.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3.-closable-css-tabs\">3. Closable CSS Tabs<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBPzgLg\" data-src=\"\/\/codepen.io\/anon\/embed\/qBPzgLg?height=450&amp;theme-id=1&amp;slug-hash=qBPzgLg&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBPzgLg\" title=\"CodePen Embed qBPzgLg\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/qBPzgLg\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>With a little help from JS, you can create a nice animated set of closable tabs.<\/p>\n\n\n\n<p>Comes with a fancy animation when you close them, try it!<\/p>\n\n\n\n<p>This one is more of a template, but it shows us how we can create tabs that have more of a purpose.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4.-animated-html-%26-css-tabs\">4. Animated HTML &amp; CSS Tabs<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWqXYmG\" data-src=\"\/\/codepen.io\/anon\/embed\/QWqXYmG?height=450&amp;theme-id=1&amp;slug-hash=QWqXYmG&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWqXYmG\" title=\"CodePen Embed QWqXYmG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/QWqXYmG\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A nice example of animated tabs using only HTML and CSS.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5.-css-tabs-with-indicator\">5. CSS Tabs With Indicator<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abLgXYj\" data-src=\"\/\/codepen.io\/anon\/embed\/abLgXYj?height=450&amp;theme-id=1&amp;slug-hash=abLgXYj&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abLgXYj\" title=\"CodePen Embed abLgXYj\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abLgXYj\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>If you are looking to create CSS tabs with icons, this one is for you.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/alvarotrigo.com\/blog\/product-landing-page\/\">product landing page<\/a> to explain the different features of a product or service.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6.-card-tabs-(css)\">6. Card Tabs (CSS)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEXdwRa\" data-src=\"\/\/codepen.io\/anon\/embed\/ZEXdwRa?height=450&amp;theme-id=1&amp;slug-hash=ZEXdwRa&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEXdwRa\" title=\"CodePen Embed ZEXdwRa\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZEXdwRa\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>CSS Tabs inside of a card, with animation on change of tab.<\/p>\n\n\n\n<p>Requires a little JS but these card designs are very popular, they are a nice way of containing information with an image or icon.<\/p>\n\n\n\n<p>A card is a great way to present engaging information to the user and a tab allows you to maximise the space.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7.-scaling-animated-tabs-(css)\">7. Scaling Animated Tabs (CSS)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxXoMJy\" data-src=\"\/\/codepen.io\/anon\/embed\/xxXoMJy?height=450&amp;theme-id=1&amp;slug-hash=xxXoMJy&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxXoMJy\" title=\"CodePen Embed xxXoMJy\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/xxXoMJy\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>CSS tabs with a scaling animation and example content.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8.-animated-zooming-tabs-(css)\">8. Animated Zooming Tabs (CSS)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvrLNEW\" data-src=\"\/\/codepen.io\/anon\/embed\/wvrLNEW?height=450&amp;theme-id=1&amp;slug-hash=wvrLNEW&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvrLNEW\" title=\"CodePen Embed wvrLNEW\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/wvrLNEW\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Animated tabs with a zoom effect on the content &#8211; but this effect isn\u2019t annoying because the background stays static, it is just the text that zooms in and out &#8211; The tabs themselves have their own cool animations and hover effects.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you do not like that text effect, try with one of these <a href=\"https:\/\/alvarotrigo.com\/blog\/css-text-animations\/\">CSS Text Animation examples<\/a> that we have selected for you.<\/p>\n<\/blockquote>\n\n\n\n<p>It is great to look at a different CSS &amp; HTML tab design where they are not attached to the content. The little gap really gives a different feel, making the design stand out.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9.-css-tab-filter-card\">9. CSS Tab Filter Card<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGoPzQw\" data-src=\"\/\/codepen.io\/anon\/embed\/bGoPzQw?height=450&amp;theme-id=1&amp;slug-hash=bGoPzQw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGoPzQw\" title=\"CodePen Embed bGoPzQw\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/bGoPzQw\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>An HTML card that uses CSS and JS to create a tab filter selection.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>You can use this example to see how something might be used in the real world, just look at those online status indicators!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"10.-flexbox-based-css-tabs\">10. Flexbox Based CSS Tabs<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwLzvQz\" data-src=\"\/\/codepen.io\/anon\/embed\/RwLzvQz?height=450&amp;theme-id=1&amp;slug-hash=RwLzvQz&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwLzvQz\" title=\"CodePen Embed RwLzvQz\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwLzvQz\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Fully responsive CSS tabs that work without any JS.<\/p>\n\n\n\n<p>Reduces down to accordion-style tabs on mobile and small screens. It has a subtle fade animation when you switch between the tabs.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you are interested in CSS accordions check out our list with <a href=\"https:\/\/alvarotrigo.com\/blog\/css-accordion\/\">the best CSS only accordions<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"11.-simple-flat-tabs-(css)\">11. Simple Flat Tabs (CSS)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGoPzMe\" data-src=\"\/\/codepen.io\/anon\/embed\/bGoPzMe?height=450&amp;theme-id=1&amp;slug-hash=bGoPzMe&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGoPzMe\" title=\"CodePen Embed bGoPzMe\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/bGoPzMe\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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 <a href=\"https:\/\/alvarotrigo.com\/blog\/flat-design-website\/\">flat-design website<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"12.-minimal-css-tab-design\">12. Minimal CSS Tab Design<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGoPzmw\" data-src=\"\/\/codepen.io\/anon\/embed\/bGoPzmw?height=450&amp;theme-id=1&amp;slug-hash=bGoPzmw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGoPzmw\" title=\"CodePen Embed bGoPzmw\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/bGoPzmw\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Minimal and flat themed CSS only tabs.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"13.-variable-height-tabs-(css)\">13. Variable Height Tabs (CSS)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRMbzBR\" data-src=\"\/\/codepen.io\/anon\/embed\/GRMbzBR?height=450&amp;theme-id=1&amp;slug-hash=GRMbzBR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRMbzBR\" title=\"CodePen Embed GRMbzBR\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/GRMbzBR\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A good example of CSS tabs with variable content height.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"14.-set-of-different-css-tabs\">14. Set Of Different CSS Tabs<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKXjJBm\" data-src=\"\/\/codepen.io\/anon\/embed\/KKXjJBm?height=450&amp;theme-id=1&amp;slug-hash=KKXjJBm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKXjJBm\" title=\"CodePen Embed KKXjJBm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKXjJBm\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A nice selection of different CSS tabs Responsive, centred and sticky tabs, etc.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Take a look!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"15.-centred-tabs-(css)\">15. Centred Tabs (CSS)<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEXdwqv\" data-src=\"\/\/codepen.io\/anon\/embed\/ZEXdwqv?height=450&amp;theme-id=1&amp;slug-hash=ZEXdwqv&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEXdwqv\" title=\"CodePen Embed ZEXdwqv\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZEXdwqv\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Centred CSS tabs with no JS.<\/p>\n\n\n\n<p>A simple fade transition between tab content and each tab has its own indicator when selected based on the background colour.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"16.-css-tabs-menu\">16. CSS Tabs Menu<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzroBjo\" data-src=\"\/\/codepen.io\/anon\/embed\/YzroBjo?height=450&amp;theme-id=1&amp;slug-hash=YzroBjo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzroBjo\" title=\"CodePen Embed YzroBjo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzroBjo\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>CSS tabs menu with content and forms.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Great to learn from and adapt to your own brand\/style.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"17.-responsive-css-tabs-with-icons\">17. Responsive CSS Tabs With Icons<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwMJgGO\" data-src=\"\/\/codepen.io\/anon\/embed\/VwMJgGO?height=450&amp;theme-id=1&amp;slug-hash=VwMJgGO&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwMJgGO\" title=\"CodePen Embed VwMJgGO\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/VwMJgGO\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"18.-css-tab-portfolio-example\">18. CSS Tab Portfolio Example<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzroBJo\" data-src=\"\/\/codepen.io\/anon\/embed\/YzroBJo?height=450&amp;theme-id=1&amp;slug-hash=YzroBJo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzroBJo\" title=\"CodePen Embed YzroBJo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/YzroBJo\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A well put together CSS tab bar which changes the content below in the style of a <a href=\"https:\/\/alvarotrigo.com\/blog\/online-portfolio-examples\/\">portfolio website<\/a>.<\/p>\n\n\n\n<p>This example shows us how CSS tabs are extremely useful in the real world, even the actual items in the tab content are working.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you like to add hover effects to your tabs buttons, we recommend you this list of the <a href=\"https:\/\/alvarotrigo.com\/blog\/best-css-button-hover-effects\/\">best CSS button hover effects<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>It is also a great example to learn how you can only display certain elements with certain tags using JS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"19.-user-menu-css-tabs\">19. User Menu CSS Tabs<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjrQxew\" data-src=\"\/\/codepen.io\/anon\/embed\/JjrQxew?height=450&amp;theme-id=1&amp;slug-hash=JjrQxew&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjrQxew\" title=\"CodePen Embed JjrQxew\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/JjrQxew\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A cool CSS tab menu that uses a lovely gradient as the background.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"20.-responsive-tabs-that-scale-down\">20. Responsive Tabs That Scale Down<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNZqPPp\" data-src=\"\/\/codepen.io\/anon\/embed\/WNZqPPp?height=450&amp;theme-id=1&amp;slug-hash=WNZqPPp&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNZqPPp\" title=\"CodePen Embed WNZqPPp\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNZqPPp\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A pure HTML and CSS Tab example of a responsive design that uses tabs and a nice animated slide down menu.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"takeaway\">Takeaway<\/h2>\n\n\n\n<p>We\u2019ve seen some great examples and each one offers something different. From responsive designs to <a href=\"https:\/\/alvarotrigo.com\/blog\/10-cool-css-animations-to-add-to-your-website\/\">fancy CSS animations<\/a> and transitions, there is something for everyone.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js<\/a><\/p>\n\n\n\n<p>\n\t\t\t<a href=\"https:\/\/alvarotrigo.com\/fullPage\/\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t<video width=\"680\" height=\"382\" muted autoplay loop playsinline>\n\t\t\t\t<source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/fullPage_intro.webm\" type=\"video\/webm\"\/>\n\t\t\t\t<source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alvarotrigo\/blog-assets\/videos\/fullPage_intro.mp4\" type=\"video\/mp4\" \/>\n\t\t\t\tYour browser does not support the video tag.\n\t\t\t\t<\/source><\/source><\/video>\n\t\t\t<\/a>\n\t\t<\/p>\n\n\n\n<p>FullPage.js is a full-featured JavaScript library that you can use to create unique and powerful full-screen scrollable websites. With <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js<\/a> you&#8217;ll quickly be building highly-polished sites that are up there with the most impressive websites &#8211; it is a library that is already used by reputable companies like EA, Sony, and eBay! &#8211;<\/p>\n\n\n\n<p>Compatible with the latest software and website editors like <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-gutenberg\/\">Gutenberg<\/a>, <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-divi\/\">Divi<\/a>, and <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-elementor\/\">Elementor<\/a>, you will surely be able to create something unique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related Articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/hamburger-menu-css\/\">10+ CSS Hamburger Menu [CodePens]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/html-css-timelines\/\">15+ CSS Timelines [CodePens]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/progress-bar-css\/\">20 CSS Progress Bar [CodePens]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/animated-backgrounds-css\/\">20 CSS Animated Backgrounds [CodePens]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-checkbox-styles\/\">Beautiful CSS styles for your checkboxes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/learn-html\/\">How long does it take to learn HTML<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Do you need to display large content on your website and you do not know how? CSS Tabs can be a great solution.<\/p>\n","protected":false},"author":11,"featured_media":5163,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9,16,25],"class_list":["post-5164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-design","tag-html"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5164"}],"version-history":[{"count":6,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5164\/revisions"}],"predecessor-version":[{"id":16198,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5164\/revisions\/16198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5163"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}