Custom Header Nav Button

Hi all-

I'm currently working on a site where I'd like to edit each individual button, I'm working with squarespace 7.1. Mainly, I'd like to make my header nav button smaller and have it outlined while I have the rest of my buttons filled with color, potentially adding some hovering effects to one in particular. I have some custom CSS I've been using, it works great when I edit, but when I toggle to preview or between different tabs, my header nav button breaks. Any help or tips would be appreciated! My CSS I'm using is below.

Thanks!

.header-actions-action .btn {
    padding: 10px 30px;
    font-size: 12px;
    color: #4E07E6 !important;
    background: #fff !important;
    border-color: violet !important;
}
.sqs-block-button-element--large:hover {background-color:#4E07E6; color:#fff}

Could you post the link to the website?