How to set text color in submit button?

Question

I tried to change the color of the text in the submit button type but, I don't know why I am not able to change it.

.button {
  width: 105px;
  height: 20px;
  background-image: url('tiny.gif');
  line-height: 20px;
  padding-bottom: 2px;
  vertical-align: middle;
  font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  <!--font-weight: bold;
  -->text-transform: none;
  border: 1px solid transparent;
}

.button:hover {
  background-image: url('tiny_.gif');
}

<input type="submit" value="Fetch" class="button" />

I was getting a problem when I tried to change the color of the submit button.

Doralyn

"Getting problems" -- this does't help us at all. What are you expecting to have happen? What is actually happening? Are there any messages in your console log? I added background-color: red to your :hover and the button changed colors when I moused over. Perhaps tiny_.gif isn't loading? – Equinox

Answer 1

.button
{
    font-size: 13px;
    color:green;
}

<input type="submit" value="Fetch" class="button"/>

Hindsight

Answer 2

you try this:

<input type="submit" style="font-face: 'Comic Sans MS'; font-size: larger; color: teal; background-color: #FFFFC0; border: 3pt ridge lightgrey" value=" Send Me! ">

Famagusta

Inline styles are not a good idea when an external stylesheet is available. – Celebrity

it's very good idea for poor css-ed pages, and for test how page will be rendered. for full css-ed pages this should be moved to external css file. – Fiddlededee

Answer 3

<button id="fwdbtn" style="color:red">Submit</button> 

Bartonbartosch

Answer 4

Use this CSS:

color: red;

that's all.

Torietorii

Answer 5

I had the same thought of wanting to change the text color rather than the button color itself to a different color. Here's what you can do:

button {
    color: black; /* This is for the font color of the button */
    background-color: aqua; /* This is for the color of the button */
    height: 70px;
    width: 70px;
}

Leonardaleonardi

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Kristalkristan

Answer 6

.btn{
    font-size: 20px;
    color:black;
}

Howlond

Could you explain your solution, only code is a bit hard to undestand correctly the answer – Upholstery

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Simulant

Answer 7

<input type = "button" style ="background-color:green"/>

Kumamoto

OP wants to change text color of a submit and you provide him with an inline style (=bad practice) changing background color of a button. This doesn't help much... – Frigidaire