Hover styling for second nav button in Bedford template

Site URL: https://chicagotoollibrary.org

Our website uses the Bedford template and I'd like to add a second button to our navigation bar that has the same styling and hover effects as our existing button, but with a different color. I've been able to hack some code to get another  button, but can't manage to get the transparent button that fills when you hover. Help?

You mean donate button?

We have a donate button but I want to also add a "member login" button for our library members to be able to easily log in to their library accounts. I want the donate and login buttons to be next to each other in the navigation and equally visible with the same styling

I managed to get a second button for Member Login to appear in blue. I can't get the text to appear blue or get the blue background + black text hover action that the Donate button has.

Here is what I have so far: 

#mainNavigation [href*="https://app.chicagotoollibrary.org/users/sign_in"] {
    background-color: transparent;
    text-color: #3582a3;
  text-decoration: none;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 5px;
    border: 2px solid #3582a3;
  font-family: proxima-nova;
    font-weight: 600;
    letter-spacing: 2px;
    margin-left: 1em;
    padding: 1em 1.5em !important;
    display: block;
}

Passive buttons

Hover effect (non-functioning for Member Login button)

Hi. Do you still need help on this?

I see on mobile, Member login is not a button. Do you want CSS for this?

@taunphan Can you help me achieve the same thing on a different template. my site is www.mensch.club or https://robin-impala-w8cj.squarespace.com/config/ 

On 11/19/2021 at 1:02 AM, amyleehayward said:

@taunphan Can you help me achieve the same thing on a different template. my site is www.mensch.club or https://robin-impala-w8cj.squarespace.com/config/ 

 

What is access password?