Turn the last navigation menu item into a button on any Brine Family template

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type {
  background-color: #d4cdc4;
  color: #ffffff;
  padding: 10px 20px;
}

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type:hover {
    opacity: .8;
  color: #ffffff;
}

If you choose to add a background on hover, replace the last part of the code with this one and change the background color to match your own:

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type:hover {
    opacity: .8;
    color: #ffffff;
    background-color: #000000;
}

Code Breakdown:

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type { targets the last navigation item. } allows us to start the styling of your new navigation button.

background-color: #d4cdc4; allows us to add a background color to your navigation item. The #d4cdc4 is the color of your background. Feel free to change this to any color that matches your branding.

color: #ffffff; allows us to change the color of the text for the new button in your navigation. The #ffffff is the color of your text. Feel free to change this color to any that matches your branding.

padding: 10px 20px; adds space within your new button. The first number is for the height of your button. The second number is for the width of your button.

} closes the style for this specific area of your code.

.Header-nav.Header-nav--primary a.Header-nav-item:last-of-type:hover { This part allows us to target the hover effect of your new navigation button. } allows us to start the styling of your new navigation button on hover.

opacity: .8; allows your button to become a little transparent while hovering. The lower the number, the more transparent it becomes.

color: #ffffff; allows the text to be a specific color while hovering.

} closes the style for this specific area of your code.