Updating Button Colors and Hover States on Booking Sites

This article will guide you through the process of customizing the button colors and hover states for your booking site to better match your venues branding.

By updating the CUSTOM CSS field, you can modify both primary and secondary button colors as well as hover states. The changes will be applied to various button styles and navigation elements on the public-facing site.

Steps to Update Button Colors and Hover States

1. Navigate to the Asset / Branding Settings

• Go to Settings in your admin panel.
• Select Assets / Branding from the left-hand menu.
• Then, click on Public Site.

2. Edit the CUSTOM CSS Field

• In the Public Site section, look for the CUSTOM CSS field.
• You can now edit the field to customize the button styles.

3. Add the Custom CSS Code

• Copy and paste the following CSS code into the CUSTOM CSS field to update the button colors and hover states.
• Change the Green / Black to colors from your style guide.
• To find your brand colors on your marketing website, right-click on the page, select "Inspect" or "Inspect Element," and check the CSS styles under the "Styles" tab for color codes associated with background, text, or button elements. E.g. hex color code = #000000 for Black.

/* Secondary Button Styles */
.e-button--secondary {
    background-color: #82c341; /* Green background */
    border-color: #82c341; /* Green border */
}

.e-button--secondary:hover {
    background-color: #000000; /* Black background on hover */
    border-color: #000000; /* Black border on hover */
}

/* Primary Button Styles */
.e-button--primary {
    background-color: #000000; /* Black background */
    border-color: #000000; /* Black border */
}

.e-button--primary:hover {
    background-color: #82c341; /* Green background on hover */
    border-color: #82c341; /* Green border on hover */
}

/* Navigation Link Hover and Active State */
.c-nav ul li:hover a, 
.c-nav ul li.active a {
    background-color: #000000; /* Black background on hover or active state */
}

4. Save Your Changes

• After pasting the code, save the changes to apply the new button styles across your booking site.

Explanation of the CSS Code

Here’s a breakdown of the custom CSS code:

1. Secondary Button (.e-button--secondary ):
   • The background and border are set to a green color (#82c341 ).

   • On hover, the button background and border change to black (#000000 ).

     
     
2. Primary Button (.e-button--primary ):
   • The background and border are set to black (#000000 ).

   • On hover, the button background and border change to green (#82c341 ).

     
     
3. Navigation Link Hover and Active State (.c-nav ul li:hover a, .c-nav ul li.active a ):
   • The background color of the navigation links changes to black (#000000 ) when hovered over or in an active state.

Previewing Your Changes

Once you've saved the changes, navigate to the public site to view the updated button colors and hover states. You should see:

• Green secondary buttons with black hover states.
• Black primary buttons with green hover states.
• Navigation links turning black when hovered over or active.

If you need further assistance with customizing your site, feel free to reach out to support.