Blaze UI Button Colors
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
A button is an important component for any website which is used for generating events whenever the user clicks the button. There are situations when we need a few buttons and each button should have a different color. The Blaze UI provides this functionality and it is known as Button Colors.
Blaze UI Button Colors Classes:
- c-button: This class is used to create a light purple-colored button.
- c-button–brand: This class is used to create a dark-blue colored button.
- c-button–info: This class is used to create a blue-colored button.
- c-button–warning: This class is used to create a yellow-colored button.
- c-button–success: This class is used to create a green-colored button.
- c-button–error: This class is used to create a red-colored button.
Syntax:
<button type="button" class="c-button c-button--brand"> ... </button>
Note: The syntax for the other classes is the same except for the name of the class which will change.
Example 1: The following example demonstrates the use of the c-button, c-button–brand, and c-button–info classes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > < style > body { margin-left:10px; margin-right:10px; } </ style > </ head > < body > < h1 class = "c-heading" style = "color:green" >w3wiki < div class = "c-heading__sub" > Blaze UI Button Colors </ div > </ h1 > < br > < button type = "button" class = "c-button" > <!--c-button--> Light Purple Button </ button > <!--c-button--brand--> < button type = "button" class = "c-button c-button--brand" > Dark Blue Button </ button > <!--c-button--brand--> < button type = "button" class = "c-button c-button--info" > Blue Button </ button > </ body > </ html > |
Output:
Example 2: The following example demonstrates the use of the c-button–warning, c-button–success, and c-button–error classes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > < style > body { margin-left:10px; margin-right:10px; } </ style > </ head > < body > < h1 class = "c-heading" style = "color:green" >w3wiki < div class = "c-heading__sub" > Blaze UI Button Colors </ div > </ h1 > < br > <!--c-button--warning--> < button type = "button" class = "c-button c-button--warning" > Yellow Button </ button > <!--c-button--error--> < button type = "button" class = "c-button c-button--error" > Red Button </ button > <!--c-button--success--> < button type = "button" class = "c-button c-button--success" > Green Button </ button > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/buttons
Contact Us