Help with add a class to menu

Hi everyone,

I hope someone can help me. This is the problem;

I’m making my first WordPress theme. I made my homepage first with html/css (instructions from ‘WordPress themes maken’ by Robbert Ravensbergen <– Dutch). It look like this:
https://cl.ly/image/101v1J3W1p1V

Yes, it’s very basic, but I like it :). Now, you might see the problem already. I used this for the links:

<div id="menu">
	     <div id="menuitems">
		 <ul>
		     <li><a href="#" class="button" />Home</a></li>
	             <li><a href="#" class="button" />Blog</a></li>
	             <li><a href="#" class="button" />Services</a></li>
	             <li><a href="#" class="button" />About us</a></li>
	             <li><a href="#" class="button" />Contact</a></li>
		</ul>
              </div>
	</div>

The css of the class “button” looks like this:

.button {
	text-decoration:none;
	text-align:center;
 	padding:3px 14px;
 	border:solid 1px #c4c4c4;
 	-webkit-border-radius:14px;
 	-moz-border-radius:14px;
 	border-radius: 14px;
	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
 	font-weight:bold;
 	color:#474747;
 	background-color:#ededed;
 	background-image: -moz-linear-gradient(top, #ededed 0%, #fcfcfc 100%);
 	background-image: -webkit-linear-gradient(top, #ededed 0%, #fcfcfc 100%);
 	background-image: -o-linear-gradient(top, #ededed 0%, #fcfcfc 100%);
 	background-image: -ms-linear-gradient(top, #ededed 0% ,#fcfcfc 100%);
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0 );
 	background-image: linear-gradient(top, #ededed 0% ,#fcfcfc 100%);
 	-webkit-box-shadow:inset 0,0,0px 0,0,0px 1,1,1px #d9d9d9,#d9d9d9,#d9d9d9;
 	-moz-box-shadow:inset 0px 0px 1px #d9d9d9;  box-shadow:inset 0px 0px 1px #d9d9d9;}

 .button:hover{
 	text-decoration: none;
 	padding:3px 14px;
 	border:solid 1px #c4c4c4;
 	-webkit-border-radius:14px;
 	-moz-border-radius:14px;
 	border-radius: 14px;
 	font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
 	font-weight:bold;
 	color:#474747;
 	background-color:#ededed;
 	background-image: -moz-linear-gradient(top, #ededed 0%, #e8e8e8 100%);
 	background-image: -webkit-linear-gradient(top, #ededed 0%, #e8e8e8 100%);
 	background-image: -o-linear-gradient(top, #ededed 0%, #e8e8e8 100%);
 	background-image: -ms-linear-gradient(top, #ededed 0% ,#e8e8e8 100%);
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#e8e8e8',GradientType=0 );
 	background-image: linear-gradient(top, #ededed 0% ,#e8e8e8 100%);
 	-webkit-box-shadow:inset 0,0,0px 0,0,0px 1,1,1px #d9d9d9,#d9d9d9,#d9d9d9;
 	-moz-box-shadow:inset 0px 0px 1px #d9d9d9;  box-shadow:inset 0px 0px 1px #d9d9d9; }

How can I add this to the menuitems, with the build in menu maker? I use this in the header.php.

<div id="menu">
        <div id="menuitems">
	<?php wp_nav_menu(); ?>
	</div>
</div

I know I can add a class in the menu editor (https://cl.ly/image/2P3W1k0c050n), but I want the class default. Can someone help me?

Thanks,
Marijn