html {
background-image: url('images/tree-cover.jpg');
background-size: cover;
background-attachment: fixed;
}

.page-header {
background-color: #222222;  /*  */
color: #FFFFFF;
padding: 20px;
}

.page-content {
background-color: #222222;
padding: 30px;
width: 700px;
margin: 0 auto;
margin-top: 30px;
color: #FFFFFF;
font-size: 14px;
line-height: 130%;
}


 /*  */
.gallery {
background-color: #222222;
padding: 30px;
width: 700px;  /*  */
margin: 0 auto;
margin-top: 30px;
text-align:center;
}

/*  */
.gallery img {
height: 100px;  /*  */
border-width: 5px;
border-color: #FFFFFF;  /*  */
border-style: solid;
box-shadow: 3px 3px 5px 6px #000000;  /*  */
margin: 5px;
}

a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}

/*  */

.main-menu {

background: #FF0000; } /*  */

 
Style your links to look like buttons

In your CSS, create two new rules:

 

/*  */

.main-menu a {

background-color: #00FF00;

border-color: #00DD00;

font-weight: bold;

display: inline-block;

padding: 5px 10px;

}

 

/*  */

.main-menu a:hover {

background-color: #00DD00; /*  */

color: #FFFFFF;

}