Article suggestions
  1. Home
  2. Design Settings
  3. Design Settings » Button Colors

Design Settings » Button Colors

  • avatar
Written by Chan Nier
Updated on March 26, 2025

 Link: https://support.brilliantdirectories.com/support/solutions/articles/12000046630

Button Colors

This article reviews the available button colors for the website, the colors set here will affect all the buttons with that specific CSS class, across the entire website. The available CSS classes are: Primary, Success, Info, Warning, Danger, Default

To edit these colors navigate to

  • Settings
  • Design Settings
  • General
  • Button Colors

Visual Guide of the Button Colors

Button Corner Style

The available options are RoundedSquare, or Circle corners:

Rounded Corners

Square Corners

Circle Corners

Primary Button Background & Primary Button Text

 

Success Button Background & Success Button Text

 

Info Button Background & Info Button Text

 

Warning Button Background & Warning Button Text

Danger Button Background & Danger Button Text

 

Default Button Background & Default Button Text

Bookmark Favorites Button Settings

These settings are part of the Bookmark My Favorites Add-On.

Enable Bookmark Counter

 

Favorite Icon

Favorite Icon Active Color

Favorite Icon Disabled Color

How To Identify What Button is Used in the Front-End

Buttons are used throughout your site for a wide variety of functions, making it difficult to document every instance where a specific button appears. Instead of attempting to list every location, this guide focuses on helping users identify which button is being used by examining its class in the front end. By inspecting a button's class, it can be determined which color scheme or design settings apply to it.

For those unfamiliar with the inspect tool, this resource provides a quick overview:

How to Use Inspect Tool in Any Browser 

Primary Button

The class btn-primary is applied to this button. Below is an example from the front end:

Success Button

The class btn-success is applied to this button. Below is an example from the front end:

Info Button

The class btn-info is applied to this button. Below is an example from the front end:

Warning Button

The class btn-warning is applied to this button. Below is an example from the front end:

Danger Button

The class btn-danger is applied to this button. Below is an example from the front end:

Default Button

The class btn-default is applied to this button. Below is an example from the front end:


Thank you for leaving a rating!
Did you find this article helpful?
0 out of 0 people found this article helpful so far
Can't find what you're looking for? Get in touch
How can we help?
Send your question below and we'll get back to you as soon as possible.
Cancel
translation missing: en.kb.default.contact_form_error
×
Thanks for your message!
Thanks for your message!
×