How does this Template apply the hover effect for .btn classes?

liechtensteinische ahv-iv-fak

I have a module button that I'm styling the same way as the buttons in the template itself. I know that you can use :hover to achieve the effect I want, but how are the buttons in the template doing that? Looking at, for example, the "Search" button for the finder module in head-search, I don't see any :hover selector in the css.

Having used a color picker, the color it changes into while hovering is #1252f1. When looking for that value in the applied styles, it doesn't exist there.

This is just for my understanding, how is the hover effect applied? I've looked through every .css value for the buttons, but can't figure it out for the life of me 🙂

saguaros

I'm not sure which button are you referring to, I will take this search button as sample: https://ja-intranet.demo.joomlart.com/index.php/en/smart-search

The search button is declared with:

.btn-primary {
    color: #ffffff;
    background-color: #4275f4;
    border-color: #2a63f3;
}

When hovering:

.btn-primary:hover {
    color: #ffffff;
    background-color: #1252f1;
    border-color: #0c45d3;
}

You can share me the URL of your site and tell me the button you want to style, I will suggest you further.