Search code examples
htmlcssbuttonhref

CSS change button color for specific href

It's a price comparison website, with a lot of links and some of them doesn't work. I recieve their href from my API as "javascript:void(0);" so the buttons do nothing.

Using custom CSS on the page I would like to change the color of the buttons with the

<a href="javascript:void(0);" class="button">Shop Now</a>

to be grayed out.

Is it possible to change color of a specific href element using custom CSS?

Solution

  • You can use the attribute selector to match the attribute exactly to [href=javascript\:void\(0\)\;], or some variant of that.

    You can read more about attribute selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

    a[href=javascript\:void\(0\)\;] {
  color: gray;
}
    <a href="javascript:void(0);" class="button">Shop Now (disabled link)</a>
<br>
<a href="#" class="button">Shop Now (normal link)</a>