Consentise Logo

How to Add Custom CSS to Your Cookie Consent Banner

You can easily customize the appearance of your cookie consent banner using CSS to match your website’s branding and style guidelines. Whether you want to change button colors, fonts, spacing, or layout, Consentise supports full visual customization via CSS.

Basic Styling with CSS Classes

The Consentise banner includes several CSS classes you can target in your stylesheet. For example, to style the “Accept All” button, you can use the .accept-all class.

Here’s a basic example of how to change the background color of the button:

.gdpr-consent-banner .accept-all {
  background-color: #333 !important;
  color: #fff !important;
  font-weight: bold;
  border-radius: 4px;
}

You can place this code in your site’s main CSS file or inside a <style> tag in the <head> section of your HTML document.

Useful Classes from the Banner

Based on the default markup, here are some of the key classes you can target:

• .accept-all — “Accept All” button
• .save-preferences — “Save” button
• .back-button — “Back” button
• .gdpr-consent-banner — The entire banner container
• .consent-options — Container for button actions
• .consent-header and .consent-body — For styling header or text content

Tip: Use browser developer tools (Inspect Element) to identify the exact class names and structure used in your current implementation.

Example: Full Custom Button Style

.gdpr-consent-banner .accept-all {
  background-color: #28a745 !important;
  color: white !important;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  text-transform: uppercase;
  transition: background 0.3s ease;
}

.gdpr-consent-banner .accept-all:hover {
  background-color: #218838 !important;
}

Final Notes

• Keep accessibility in mind—ensure good color contrast and readable font sizes.
• Test the appearance across different screen sizes and languages.
• For more advanced customization (e.g., custom icons or layout changes), consider wrapping additional CSS rules in @media queries or using CSS variables.

Need help identifying which class to target or how to apply advanced styling? Contact our support team or check out more examples in the Consentise Design Guide.