I want to turn the input buttons from grey to black - css

Question

I'm creating a webpage with no js , and the llok I have is perfect except for one the grey input/submit boxes , I've tried all sorts of options with buttons code but cant turn them black or blue or even transparent , is it possible ? if yes how ? someone please help
.input {
background-color: transparent;
background: #7ec2cf;
color: #eaed5e;
font-size: 15px;
line-height: 15px;
padding: 3px;
border-radius: 2px;
font-family: Georgia, serif;
font-weight: bold;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
border-color: #7ec2cf;
border-style: #7ec2cf 2px;
display: inline-block;
}
.input:hover {
background: #eaed5e;
color: #7ec2cf
}
.input:active {
background: #7ec2cf;
color: #eaed5e
}
<div class="input">
<input value="Logout" type="submit">
</div>
<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">

Answer 1

html:
<form method="post">
<div>
<input value="Logout" type="button" class="press">
</div>
<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">
</form>
css:
.press {
background-color: blue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.input:hover { background: #eaed5e; color: #7ec2cf} .input:active { background: #7ec2cf; color: #eaed5e }
Is this what you wanted?

Answer 2

The problem with your css is the selector you're using - .input which represents class names input, for the selecting the button either use -
.input input{
//your code here for the button
}
or
.input>input{
//your code here for the button
}
or just
input {
//your code here for the button
}

Answer 3

Take a look at the following example. Just remove the div and apply the .input class to the input element. Also note that background-color redundant in this case.
.input {
background: #7ec2cf;
color: #eaed5e;
font-size: 15px;
line-height: 15px;
padding: 3px;
border-radius: 2px;
font-family: Georgia, serif;
font-weight: bold;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
border-color: #7ec2cf;
border-style: #7ec2cf 2px;
display: inline-block;
}
.input:hover {
background: #eaed5e;
color: #7ec2cf
}
.input:active {
background: #7ec2cf;
color: #eaed5e
}
<input value="Logout" type="submit" class="input">
<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">