Design Settings » Button Colors
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:
