twentythirteen have created a button in the navbar but unable to specify color

I have created a button on the navigation menu using a class created in my child style.css the button shows up fine but I cannot specify the color. instead it is an orange color
which SEEMS to be inherited from somewhere. I have truly tried to find out where but am unable to do so.
I am calling this class via the navigation label in the menu item home thus:
‘<button class=”navbtnhome”>home</button>’
my child style.css

/*
Theme Name: TwentyThirteen Child
Description: My Retrobrain child theme
Author: John W Evans
Version: 1.0
Template: twentythirteen
*/

@import url(‘../twentythirteen/style.css’);

.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 35px;
position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}

.nav-menu li {
display: inline-block;
position: relative;
}

.nav-menu li a {
color: #141412;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
background-color: #220e10;
color: #fff;
}

.nav-menu .sub-menu,
.nav-menu .children {
background-color: #220e10;
border: 2px solid #f7f5e7;
border-top: 0;
padding: 0;
position: absolute;
left: -2px;
z-index: 99999;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
color: #fff;
margin: 0;
width: 200px;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
background-color: #db572f;
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul,
ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
/*
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
*/
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
color: #bc360a;
font-style: italic;
}

.site-header {
position: relative;
}

.site-header .home-link {
color: #F7F5E7; /*#141412;*/
display: block;
margin: 0 auto;
max-width: 1080px;
min-height: 230px;
padding: 0 20px;
text-decoration: none;
width: 100%;
}

.site-header .site-title:hover {
text-decoration: underline;
}

.site-title {
font-size: 60px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 58px 0 10px;
}

.site-description {
font: 300 italic 24px “Source Sans Pro”, Helvetica, sans-serif;
margin: 0;
}

.navbtnhome {
margin-top: -5px;
margin-bottom: -5px;
background-color: #00ff00;
color: black;
border-color: yellow;
border-radius: 10px;
padding: 5px 15px 5px 15px;
/*margin-top: 2px;*/
}

.navbtnhome:hover {
margin-top: -5px;
margin-bottom: -5px;
background-color: #00ff00;
color: black;
border-color: green;
border-radius: 10px;
padding: 5px 15px 5px 15px;

as you can see i’m trying to create a button color of #00ff00 but it just remains orange

PLEASE help me – i need to know where this orange color is coming from. then I can get on with things.

I scrapped my web-site plans and started afresh with a new canvas but this color problem persists.
I know i must have missed something.

forgive me for what must seem to you a very simple problem but it has stymied me for weeks.

Thanks for reading…