Configuration

Button Customization

Last Updated: Nov 27, 2025

9 min read

Introduction

Button Customization allows you to style the action buttons on your cookie consent banner to match your brand and design preferences. From the “Accept” and “Decline” buttons to “Cookie Settings” and custom actions, every button can be tailored to create a cohesive and professional appearance.

Well-designed buttons not only look good but also improve user experience by making actions clear and encouraging proper consent choices while maintaining GDPR compliance.

Understanding Button Types

PureDevs GDPR Compliance includes several button types, each serving a specific purpose:

1. Accept Button (Primary)

Purpose: User accepts all cookies
Common Labels: “Accept All”, “I Agree”, “Accept Cookies”, “Got It”
Visual Priority: Primary button style (most prominent)
GDPR Requirement: Must be equally prominent as Decline

2. Decline Button (Secondary)

Purpose: User rejects non-essential cookies
Common Labels: “Decline”, “Reject All”, “No Thanks”, “Necessary Only”
Visual Priority: Secondary style (equally visible)
GDPR Requirement: Must be as easy to use as Accept

3. Settings/Customize Button

Purpose: Opens Privacy Overview for granular control
Common Labels: “Cookie Settings”, “Customize”, “Preferences”, “Manage”
Visual Priority: Tertiary or link style
GDPR Requirement: Should be clearly accessible

4. Save Preferences Button

Purpose: Saves custom cookie selections from Privacy Overview
Common Labels: “Save Preferences”, “Save Settings”, “Confirm Choices”
Visual Priority: Primary style within Privacy Overview
GDPR Requirement: Must clearly indicate saving action

GDPR Compliance

Accept and Decline buttons must have equal visual prominence. Using design patterns that make declining harder (dark patterns) can violate GDPR and result in fines.

Accessing Button Customization

Log in to your WordPress admin dashboard
Navigate to Settings → PureDevs GDPR compliance
Click the Button Settings tab
You’ll see separate sections for each button type
Customize each button individually
Use Live Preview to see changes in real-time
Click Save Changes when done

Button Text Configuration

Accept Button Text Options

Recommended Labels:

“Accept All” – Clear, specific, recommended
“Accept Cookies” – Explicit about what’s being accepted
“I Agree” – Traditional, concise
“Got It” – Casual, friendly tone
“OK” – Simple but less informative

Avoid:

Misleading labels like “Continue” (implies no choice)
Vague terms like “Sure” or “Yes”
Overly long text that doesn’t fit on mobile

Decline Button Text Options

Recommended Labels:

“Decline” – Clear, neutral
“Reject All” – Explicit opposite of “Accept All”
“No Thanks” – Polite refusal
“Necessary Only” – Explains what will happen
“Decline Non-Essential” – Specific and accurate

Avoid:

Negative framing: “Worsen Experience”
Hiding decline in unclear labels
Making decline sound undesirable

Settings Button Text Options

Recommended Labels:

“Cookie Settings” – Clear, specific
“Customize” – Action-oriented
“Preferences” – User-focused
“Manage Cookies” – Explicit control
“More Options” – Suggests additional choices

Text Length Considerations

Desktop: Can use longer, descriptive labels
Mobile: Keep it short (1-2 words if possible)
Multiple Languages: Account for text expansion
Icon + Text: Can use icons to shorten text

Button Style Options

Style Types

Choose from predefined button styles or create custom designs:

1. Solid/Filled Button

Appearance: Solid background color, contrasting text
Best For: Primary actions (Accept, Save)
Visual Weight: High prominence

background: #0066cc;
color: #ffffff;
border: none;

2. Outline/Ghost Button

Appearance: Transparent background, colored border
Best For: Secondary actions (Decline)
Visual Weight: Medium prominence

background: transparent;
color: #0066cc;
border: 2px solid #0066cc;

3. Text/Link Button

Appearance: No background, no border, just text
Best For: Tertiary actions (Settings, Links)
Visual Weight: Low prominence

background: transparent;
color: #0066cc;
border: none;
text-decoration: underline;

4. Hybrid Styles

Subtle background with border
Gradient backgrounds
Icon + text combinations

Recommendation

Use solid style for Accept button and outline style for Decline button. This provides clear visual distinction while maintaining equal prominence for GDPR compliance.

Button Color Customization

Accept Button Colors

Solid Button:

Background: Brand primary color or blue (#0066cc)
Text Color: White (#ffffff) for contrast
Hover Background: Darker shade (10-15% darker)
Hover Text: Same as default or slightly brighter

Decline Button Colors

Outline Button:

Border Color: Same as Accept background or neutral gray
Text Color: Same as border color
Hover Background: Light fill (10% opacity of border color)
Hover Border: Slightly darker

Settings Button Colors

Text/Link Button:

Text Color: Link color or neutral dark gray
Hover Color: Darker or underlined
Optional Background: Very subtle (#f5f5f5)

Color Scheme Examples

Professional Blue Scheme

Accept Button:
  Background: #0066cc
  Text: #ffffff
  Hover: #0052a3

Decline Button:
  Border: #6c757d
  Text: #6c757d
  Hover Background: rgba(108, 117, 125, 0.1)

Settings Button:
  Text: #0066cc
  Hover: #0052a3 (underlined)

Brand-Focused Scheme

Accept Button:
  Background: #28a745 (brand green)
  Text: #ffffff
  Hover: #218838

Decline Button:
  Border: #6c757d
  Text: #6c757d
  Hover Background: rgba(108, 117, 125, 0.1)

Settings Button:
  Text: #28a745
  Hover: #218838

High Contrast (Dark Theme)

Accept Button:
  Background: #4dabf7
  Text: #1a1a1a
  Hover: #339af0

Decline Button:
  Border: #e0e0e0
  Text: #e0e0e0
  Hover Background: rgba(224, 224, 224, 0.1)

Settings Button:
  Text: #4dabf7
  Hover: #339af0

Accessibility Requirements

Contrast Ratio: 4.5:1 minimum for text (WCAG AA)
Button vs Background: 3:1 minimum for non-text elements
Color Independence: Don’t rely solely on color to convey meaning
Focus States: Clear visual indicator when button is focused

Button Size and Spacing

Button Dimensions

Height:

Compact: 32-36px (space-constrained banners)
Standard: 40-44px (recommended for accessibility)
Large: 48-52px (mobile-first, easy tapping)

Width:

Auto: Based on text length + padding
Fixed: 100-150px for consistency
Full Width (Mobile): 100% width on small screens

Padding:

Horizontal: 16-24px (left/right)
Vertical: 10-14px (top/bottom)
Adjust: Increase on mobile for easier tapping

Button Spacing

Gap Between Buttons:

Horizontal Layout: 10-16px gap
Vertical Layout (Mobile): 8-12px gap
Grouped Buttons: 8px between similar actions
Separated Actions: 20px+ for distinct button groups

Touch Target Size (Mobile)

Minimum: 44x44px (iOS), 48x48px (Android)
Recommended: 48x48px for universal compatibility
Spacing: 8px minimum between touch targets
Full Width: Stack buttons vertically on very small screens

Button Typography

Font Settings

Font Family:

Inherit from banner or use site font
System fonts for fast loading
Sans-serif for clarity and readability

Font Size:

Desktop: 14-16px
Mobile: 16px minimum (prevents zoom on iOS)
Large Buttons: Can use 16-18px

Font Weight:

Primary Buttons: 500-600 (medium-semibold)
Secondary Buttons: 500 (medium)
Text Buttons: 500-600 (medium-semibold)
Avoid: Light weights (< 400) for buttons

Text Styling

Text Transform: None, uppercase, or capitalize
Letter Spacing: 0-0.05em (slight increase for uppercase)
Text Decoration: None (except hover on text buttons)
Text Alignment: Center within button

Typography Examples

/* Modern style - sentence case */
font-size: 15px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;

/* Traditional style - all caps */
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;

/* Minimal style - regular case */
font-size: 16px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;

Borders and Border Radius

Border Styling

Solid Buttons:

Usually no border (border: none)
Optional subtle border in slightly darker shade
Hover state can add border

Outline Buttons:

Border Width: 1-2px
Border Style: Solid
Border Color: Match text color or brand color
Hover: Increase width or change color

Border Radius

Options:

Sharp (0px): Modern, clean, professional
Subtle (2-4px): Slightly softened corners
Rounded (6-8px): Friendly, approachable (most common)
Very Rounded (20-24px): Pill-shaped, modern
Fully Rounded (50%): Circular buttons (icon only)

Consistency:

Use same border radius across all buttons
Match banner border radius if applicable
Consider site-wide button styling

Examples

/* Sharp modern buttons */
border-radius: 0;

/* Subtle rounded (recommended) */
border-radius: 6px;

/* Pill-shaped buttons */
border-radius: 24px;

/* Match different button sizes */
.button-small { border-radius: 4px; }
.button-medium { border-radius: 6px; }
.button-large { border-radius: 8px; }

Hover and Active States

Hover Effects

Color Changes:

Darken Background: 10-15% darker on hover
Lighten Text: Slightly brighter text (optional)
Border Change: Thicker or different color border
Add Shadow: Subtle box-shadow on hover

Transform Effects:

Lift: translateY(-2px) – button appears to lift
Scale: scale(1.05) – button slightly grows
Both: Combine lift + shadow for depth

Transition Settings:

transition: all 0.2s ease;
/* Or specify individual properties */
transition: background-color 0.2s ease,
            transform 0.2s ease,
            box-shadow 0.2s ease;

Active State

When button is clicked/pressed:

Pressed Look: translateY(1px) – button moves down
Darker Background: Even darker than hover
Reduced Shadow: Less elevation
Scale Down: scale(0.98) – slight shrink

Focus State (Accessibility)

When button is keyboard-focused:

Outline: 2-3px solid outline in contrasting color
Offset: 2px outline offset for clarity
Color: Browser default or custom brand color
Box Shadow: Alternative to outline

/* Accessible focus state */
button:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* Or using box-shadow */
button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4);
}

Disabled State

For inactive buttons:

Opacity: 0.5-0.6 to appear faded
Cursor: not-allowed or default
Remove Hover: No hover effects when disabled
Color: Gray out background/text

Button Layout and Positioning

Horizontal Layout (Desktop)

Arrangement:

Left to Right: Settings, Decline, Accept
Or: Accept, Decline, Settings
Spacing: 10-16px gap via flexbox or grid
Alignment: Center, right, or left align

display: flex;
gap: 12px;
justify-content: center; /* or flex-end, flex-start */

Vertical Layout (Mobile)

Stacking:

Top to Bottom: Accept first, then Decline, then Settings
Full Width: Buttons stretch to 100% width
Spacing: 8-12px gap between buttons
Order: Primary action at top for thumb-reach

@media (max-width: 768px) {
    .button-container {
        flex-direction: column;
        gap: 10px;
    }

    button {
        width: 100%;
    }
}

Button Grouping

Primary Group: Accept + Decline together
Secondary Action: Settings button separate
Visual Separation: Extra space or divider between groups

Button Icons

Adding Icons to Buttons

Icon Placement:

Left Icon: Icon before text (most common)
Right Icon: Icon after text (for arrows, external links)
Icon Only: No text, just icon (use sparingly)

Common Icons:

Accept: Checkmark ✓, thumbs up 👍
Decline: X ✗, thumbs down 👎
Settings: Gear ⚙, sliders, cog
Info: Info icon ℹ

Icon Sizing and Spacing

Icon Size: 16-20px (match text size)
Gap: 6-8px between icon and text
Alignment: Vertically center with text

Icon Implementation

/* Using HTML + CSS */


/* CSS */
.btn-accept {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-accept .icon {
    width: 18px;
    height: 18px;
}

Accessibility

If using icon-only buttons, always include aria-label for screen readers: <button aria-label=”Cookie Settings”><svg>…</svg></button>