Några tips

Teckensnittet hittar du bland webbfonterna.
I CSS Designer: Font-family > Hantera teckensnitt... > Välj teckensnitt > Klicka Klar.
Gå tillbaka till Font-family igen och välj teckensnittet som nu kommit upp i listan.

HTML-kod som kan fungera för knapparna

<nav id="menu">
<ul>
<li><a href="#">Knapp 1</a></li>
<li><a href="#">Knapp 2</a></li>
<li><a href="#">Knapp 3</a></li>
</ul>
</nav>

(# byts förstås ut mot aktuell adress när man gör en meny som ska fungera.)

CSS-kod som kan fungera för knapparna

(Du behöver inte skriva av kommentarerna om du inte vill, la in dem för att förklara vad koden gör.)

/* INSTÄLLNINGAR MENY */
ul {
list-style-type: none;          /* Tar bort punkten före länken */
margin: 0;          /* Nollställer webbläsarens standardinställning */
padding: 0;          /* Nollställer webbläsarens standardinställning */
}

li {
background-color: #D5ABD0;          /* Bakgrundsfärg på knappen */
margin-bottom: 10px;          /* Avstånd mellan knapparna */
text-align: center;          /* Centrerar texten */
font-size: 20px;          /* Storlek på texten */
border-radius: 7px;          /* Rundar hörnen på knappen */
}

li a {
display: block;          /* Gör hela knappen klickbar, inte bara texten */
color: white;          /* Textfärg */
text-decoration: none;          /* Tar bort understrykningen */
padding: 20px;          /* Avstånd mellan text och kant */
border-radius: 7px;          /* Rundar hörnen på knappen */
}

li a:hover {
background-color: #97759A;          /* Bakgrundsfärg när musen hålls över knapp */
}

(Fler menyexempel hittar du på w3schools.com, till exempel dropdownmenyer. Söker gärna på menu på sidan.)