Styling a link based on class and its href content

Question

And i want to create a css that is specific to this button only that has the href="https://link.com/inst link and is of class btn btn-primary btn-block.

the class btn btn-primary btn-block is a global bootstrap class therefore if i redefine the class only it will change any other button in the website.

.btn .btn-primary .btn-block a[href^="https://link.com/inst"]{
    font-family:Verdana;
    font-size:22px;
    color:red;
}

<a href="https://link.com/inst" class="btn btn-primary btn-block">Calculate Your Order</a>

I dont know how to incorporate this two together.

Answer 1

You can make the class assignment for the <a> tag. Like this:

a.btn.btn-primary.btn-block[href^="https://link.com/inst"] {}

a.btn.btn-primary.btn-block[href^="https://link.com/inst"] {
    font-family:Verdana;
    font-size:22px;
    color: red;
}

<a href="" class="btn btn-primary btn-block">Calculate Your Order</a>
<a href="https://link.com/inst" class="btn btn-primary btn-block">Calculate Your Order</a>

The second solution is to specify an attribute with classes in the css for the <a> tag. Like this:

a[href^="https://link.com/inst"][class^="btn btn-primary btn-block"] {}

a[href^="https://link.com/inst"][class^="btn btn-primary btn-block"] {
    font-family:Verdana;
    font-size:22px;
    color: red;
}

<a href="" class="btn btn-primary btn-block">Calculate Your Order</a>
<a href="https://link.com/inst" class="btn btn-primary btn-block">Calculate Your Order</a>