Design Settings » Button Colors

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 Rounded, Square, 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: