I am trying to change the background color and text color of a link inside a button that I created, but only the background color changes. The text remains it's default color and refuses to change regardless of !important tags.

Here is my code:

```css
button,
input,
select,
textarea {
  font-size: 100%;
  /* Corrects font size not being inherited in all browsers */
  margin: 0;
  /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
  vertical-align: baseline;
  /* Improves appearance and consistency in all browsers */
  padding: 15px;
}

button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  font-size: 12px;
  padding: 12px 30px;
  margin-bottom: 10px;
  width: 200px;
  border: 1px solid #007af4;
  color: #007af4;
  text-transform: uppercase;
  letter-spacing: 4px;
  background-color: transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  /* Improves usability and consistency of cursor style between image-type 'input' and others */
  -webkit-appearance: button;
  /* Corrects inability to style clickable 'input' types in iOS */
}

.button {
  -webkit-appearance: none;
}

input[type="submit"] {
  margin-top: 5px;
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color: #007af4;
  text-decoration: none;
  color: #FFFFFF;
}
```

```html
<div class="button">
  <a href="javascript:void(0)" onclick="javascript:jqcc.cometchat.chatWith(<?PHP echo bp_displayed_user_id(); ?>);">Chat with us<a>
</div>
```

I've already looked at these two threads:

[a:hover color is not working](https://stackoverflow.com/questions/16967118/ahover-color-is-not-working)

[a: hover, color is not changing](https://stackoverflow.com/questions/35241294/a-hover-color-is-not-changing)

Neither of the answers given on those threads helped with my problem (Unless I've overlooked something), so any help is greatly appreciated!
['https://Stackoverflow.com/questions/46061388', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/8565234/']
Your CSS doesn't actually have any `a:hover` rules.

Why do you expect something to happen?

CSS will only do what you tell it to.
When you are changing a links colour on hover you need to make sure to apply it to the `a` tag directly. So in your case you want a style similar to the following:

```
a:hover {
    color: white;
}

```