Having trouble with the style of a button link

[Michael]

Hi guys,

I have added a “Leave Review” button on the bottom of our home page:

https://reclaimdesign.org

I find myself unable to override the border-bottom: 1px dotted #539c22; I’ve put into place for .row a. Currently if you hover over the button it shows up.

I need the border for other areas of the site, but I’d just like to override it for .reviewbutton. I have tried every variation of targetting I can think of but the border on the hover over the button refuses to budge. Please could you tell me where I’m going wrong?

Thank you very much 🙂

Michael.

[Leo]

Hi there,

This should help:

.row a:hover {
    border: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Hi Leo,

Thanks very much for getting back to me. There are other items using the row class on that page that the a:hover refers to which I need to keep the border for. I needed to get my specificity right for the button itself I thought, but have not been able to manage it.

[Leo]

That case you’d need to add a specific class to button then target that instead.

For example, if the specific class is button, then this CSS should do:

.row a.button:hover {
    border: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

Thanks Leo I added another class and it’s working 🙂

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts