About CSS How to make TABS
How to make TABS:

This is an example of using the HTML 'Buttons'.
We here build a row of tabs, that shows different content when the separate buttons are clicked.
You can easily add buttons by adding more lines in the HTML code you find here.
I use this very code on all the pages here on the
In this example we don't use PHP, so that button have been left out. But the site generally presents code in the different web developing languages; HTML, CSS, Javascript and PHP.

 The project: Tabs

Tabs; a good way to separate the content into visibly different "pages", or sections.
To build a tabrow, with separate buttons as tabs, takes some HTML and Javascript mainly.
As you see here above, there is a tab for each web building langauge used in making these Tabs.
To add a button to the tabrow is simple, just add this HTML snippet and you are going good:
Here is how you make them..

<button class="tablinks" onclick="openlanguage(event, 'PHP')">PHP</button>
To change the look and feel of your tabs, use some CSS styling. If you need inspiration, go look at the CSS code section, here on

An alternative to these tabs can be "Collapsibles". Where you also can separate the content into different "containers". I have a good example of how you can create and use collapsibles elsewhere here on the webdeveloping webpages.


<DIV class="tabborder">
<button class="tablinks" onclick="openlanguage(event, 'source')">Project: Tabs</button>
<button class="tablinks" onclick="openlanguage(event, 'HTML')">HTML</button>
<button class="tablinks" onclick="openlanguage(event, 'CSS')">CSS</button>
<button class="tablinks" onclick="openlanguage(event, 'Javascript')">Javascript</button>


.tablinks {
    border-top:2px solid #000000;
    border-left:2px solid #000000;
    border-right:2px solid #000000;
    border-radius:0px 10px 0px 0px;
    border-bottom:2px solid #000000;


function openlanguage(evt, openlanguage) {
var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");

document.getElementById(openlanguage).style.display = "block";
evt.currentTarget.className += " active";


Icons made by Freepik from This page is about how to make buttons look like a tabrow using HTML, CSS and Javascript. You can style this further to suit you