Question

I am trying to override a link style in a parent CSS file someplace that is underlining my button text on hover. I found that by attaching the style I want (text-decoration:none) inline, on the element does the override but I would rather not do that.

Any ideas on how to do this better?

<a href="javascript:void(0);" style="text-decoration:none;" class="nco-approve-btn" data-attr-club-id="14">Approve</a>



.nco-approve-btn {

  background: #ad0a0a;
  background-image: -webkit-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -moz-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -ms-linear-gradient(top, #ad0a0a, #de5252);
  background-image: -o-linear-gradient(top, #ad0a0a, #de5252);
  background-image: linear-gradient(to bottom, #ad0a0a, #de5252);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 11px;
  padding: 5px 7px 5px 7px;
  text-decoration: none;
}

.nco-approve-btn:hover {
  background: #8f1313;
  background-image: -webkit-linear-gradient(top, #8f1313, #731717);
  background-image: -moz-linear-gradient(top, #8f1313, #731717);
  background-image: -ms-linear-gradient(top, #8f1313, #731717);
  background-image: -o-linear-gradient(top, #8f1313, #731717);
  background-image: linear-gradient(to bottom, #8f1313, #731717);
  text-decoration: none;
  color: #ffffff;
}


.nco-approve-btn:link {text-decoration: none; color: #ffffff;}
.nco-approve-btn:visited {text-decoration: none; color: #ffffff;}
.nco-approve-btn:active {text-decoration: none; color: #ffffff;}
Was it helpful?

Solution

Placing the !important keyword after an attribute will give that attribute precedence.

About CSS order of precedence

OTHER TIPS

There is probably some stronger rule in your stylesheet such as

.parent-class .nco-approve-btn{text-decoration:underline;}

Check in developer tools what is the rule, and then make the one for the link without decoration stronger (by adding extra class). You can use !important, but do that only if you are sure you will never ever ever will need the class to have the decoration.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top