A set of buttons?

How would one make something like this?
I mean what kind of file even is this?

I think I may have misunderstood your question, because there doesn’t seem to be anything special about those buttons. They’re HTML <li> items on a black background.

Is it the layout of the buttons you’re asking about?

Well yes, that, and I also do not know how <li> works

Are you familiar with HTML and CSS at all?

It’s very common for a set of links, such as navigation links, to be marked up as a list because that’s basically what they are - a list of links. So you’d start with something like

<ul>
<li><a href="page1.html">First Page</a></li>
<li><a href="page2.html">Second Page</a></li>
<li><a href="page3.html">Third Page</a></li>
<li><a href="page4.html">Fourth Page</a></li>
</ul>

Then you use CSS to control the layout and styling of these links.

If you visit the page in your link, and right-click on one of the buttons, your browser should show you a menu option of “Inspect element”, or something similar. If you select that, you can see both the HTML code in use and the styles being applied to it.

Well I did press inspect element, actually that was the first thing I did.
css is the one thing I do not understand at all, how would I even start with it?

My advice would be to get a book which will take you through the basics in a logical, step-by-step manner. Alternatively, you’ll find any number of tutorial sites on-line, although the quality may vary. (I’d advise you to steer clear of W3Schools, as it can be inaccurate and slow to update.) Search the forums and you’ll find various threads with recommendations for beginners resources. For example:

http://www.htmldog.com/guides/
http://docs.webplatform.org/wiki/Main_Page
http://www.codecademy.com/

If you’re happy to spend a little money, then our sister site, Learnable, has a wide range of books and courses: https://learnable.com/topics/htmlcss

Ok thnaks