Background colour not setting in CSS and HTML

Question

I am trying to add a CSS button to my code, but the background colour of the button is not changing.

Here is my CSS code for the button:

.button {
  background-color: red;
  border: solid;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline;
  font-size: 16px; 
  -moz-appearance: button;
  -webkit-appearance: button;

  text-decoration: none;
}

Here is the HTML code I currently have:

<div>
  <a href="names.html" class="button">Click here</a>
</div>

The background of the button remains the standard white colour no matter what I set the background-color to. This is the current button, but I would like to change the background.

Answer 1

This is exactly your code. How you can see it works. I think in your project is another CSS which overwrites your background-color. You can use the developer tools (F12) to check which part of your CSS is responsible for the background-color.

chrome dev tools (inspecting html)
chrome dev tools (inspecting css)

 .button { background-color: red; border: solid; color: black; padding: 15px 32px; text-align: center; text-decoration: none; display: inline; font-size: 16px; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; } 

 <div> <a href="names.html" class="button">Click here</a> </div> 

Answer 2

Override other css:

    .button{
background: red! important
}

Answer 3

Either your CSS is being overridden by another class that you haven't showed us or your browser is caching the incorrect result. If you are using Chrome:

1. Right click your page and click "Inspect"
2. In Inspector there should be a "Network" tab listed. Click it.
3. Inside of that tab, there should be a checkbox for "Disable Cache". Check it
4. Refresh your page with this option checked.

If that doesn't work then it is likely being overridden somewhere.

Answer 4

Yes. There's nothing wrong with the code. Maybe you shouldn't have rendered your css properly or used the same class name for lot of elements. I've also tried it with your code. It's good.

 .button { background-color: blue; border: 2px solid red; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline; font-size: 16px; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; } 

 <div> <a href="names.html" class="button">Click here</a> </div>