Color Not Working On Active Button

I am trying to get the css font color to change to white when a button is pressed, however the only way I can currently do this is if I use !important and force the color to change

Solution 1:

This is a matter of selectors ordering given CSS specificity are the same the cascade part of CSS will take care of it and make the last rule override the priors.

How LOVE and HATE should be ordered:

a:linka:visiteda:hover/* Note that `a:focus` is the same order level as `a:hover` */a:active

so in your case, should be:

.modal-close:focus {}
.modal-close:hover {}
.modal-close:active {}

Solution 2:

Switch the order of your :hover and :active defs

.modal-close {
    width: 30px;
    height: 30px;
    border-radius:30px;
    border: 1px solid $gray-light;
    font-size: 14px;
    font-weight: 200;
}
.modal-close-x {
    position: relative;
    right: 3px;
    bottom: 4px;
}
.modal-close:focus {
    outline: 0;
}

.modal-close:hover {
    border: 1px solid #41b97c;
    color: #41b97c;
}
.modal-close:active {
    background: #41b97c;
    color: #ffffff; /* want this to work without !important */border: 1px solid #41b97c;
}

<buttonclass="modal-close pull-right"aria-label="Close" ><spanclass="modal-close-x"aria-hidden="true">&times;</span></button>

Solution 3:

Simply put the :active after the :hover in the CSS to add more priority to it and override the :hover class :

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 1px solid $gray-light;
  font-size: 14px;
  font-weight: 200;
}

.modal-close-x {
  position: relative;
  right: 3px;
  bottom: 4px;
}

.modal-close:focus {
  outline: 0;
}


.modal-close:hover {
  border: 1px solid #41b97c;
  color: #41b97c;
}
.modal-close:active {
  background: #41b97c;
  color: #ffffff;
 /* border: 1px solid #41b97c; also no need this style as it's already defined on hover */
}

<buttonclass="modal-close pull-right"aria-label="Close"><spanclass="modal-close-x"aria-hidden="true">&times;</span></button>

Solution 4:

Because the browser reads top to bottom with the ones at the top applied first and the ones at the bottom applied last, you can simply put .modal-close:active at the bottom of your CSS like so:

.modal-close {
    width: 30px;
    height: 30px;
    border-radius:30px;
    border: 1px solid $gray-light;
    font-size: 14px;
    font-weight: 200;
}
.modal-close-x {
    position: relative;
    right: 3px;
    bottom: 4px;
}
.modal-close:focus {
    outline: 0;
}
.modal-close:hover {
    border: 1px solid #41b97c;
    color: #41b97c;
}
.modal-close:active {
    background: #41b97c;
    color: #ffffff;
    border: 1px solid #41b97c;
}