Blaze UI Button Ghost colors

Last Updated : 26 Apr, 2022

Blaze CSS is Framework-free open source UI toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. It is responsive in nature, as all the components are developed mobile-first and work on any screen size.

A button is an important component in any website which is used for generating events whenever the user clicks the button. Blaze UI provides us with various Button Ghost Colors to style.

Blaze CSS Button Ghost Colors classes:

c-button: This class is used to create a simple basic button.
c-button–ghost: This class is used to define the button as a ghost button.
c-button–brand: This class is used to define grey-colored ghost buttons.
c-button–info: This class is used to define blue-colored ghost buttons.
c-button–warning: This class is used to define the yellow-colored ghost button.
c-button–success: This class is used to define green colored ghost button.
c-button–error: This class is used to define the red-colored ghost button.

Syntax:

<button type="button" class="c-button 
    c-button--ghost c-button--brand">
    ...
</button>

Example 1: This example demonstrates the use of Blaze CSS Button Ghost Colors using c-button–brand and c-button–info classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Blaze CSS Button Ghost Colors</title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
  <div class="u-centered"> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <h2>Blaze CSS Button Ghost Colors</h2> 
  
    <button type="button" class="c-button"> 
      Basic-Button 
    </button> 
      
    <button type="button" class="c-button c-button--brand"> 
      Brand-Button 
    </button> 
      
    <button type="button" class="c-button c-button--info"> 
      Info-Button 
    </button> 
  </div> 
</body> 
  
</html>

Output:

Blaze CSS Button Ghost Colors

Example 2: This is another example that demonstrates the use of Blaze CSS Button Ghost Colors using c-button–success, c-Button–warning, and c-button–error classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> 
    Blaze CSS Button Ghost Colors 
  </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <div class="u-centered"> 
      <h1 style="color: green">GeeksforGeeks</h1> 
      <h2>Blaze CSS Button Ghost Colors</h2> 
  
      <button type="button" class="c-button c-button--warning"> 
        Warning-Button 
      </button> 
  
      <button type="button" class="c-button c-button--success"> 
        Success-Button 
      </button> 
  
      <button type="button" class="c-button c-button--error"> 
        Error-Button 
      </button> 
    </div> 
</body> 
  
</html>