Skip to content
Related Articles

Related Articles

Blaze UI Button Colors

Improve Article
Save Article
  • Last Updated : 21 Apr, 2022
Improve Article
Save Article

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=
    <style>
       body
       {
        margin-left:10px;
        margin-right:10px;
       }
    </style>
</head>
<body>
    <h1 class="c-heading" style="color:green">GeeksforGeeks
        <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=
    <style>
       body
       {
        margin-left:10px;
        margin-right:10px;
       }
    </style>
</head>
<body>
    <h1 class="c-heading" style="color:green">GeeksforGeeks
        <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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!