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.
Buttons help us to initiate an action such as submitting a form, navigating to another link, etc. There are multiple types of buttons in Blaze UI such as the Basic button, ghost button, rounded button, active state button, full-width button, and many more. In this article, we will discuss the Active State Button in Blaze UI.
The active state of buttons shows that the button is already pressed through a darker background color. To create an active state button in Blaze UI, we use the .c-button–active class along with the .c-button class. These classes can be applied to the <button> element as well as on <a> element.
Blaze UI Button Active State used classes:
- .c-button–active: This class makes the background color of the button darker to show the active state.
Syntax:
<button class="c-button c-button--active">
...
</button>Example 1: This example demonstrates the basic active state button in Blaze UI.
<!DOCTYPE html> <html lang="en">
<head>
<title>Blaze UI</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Blaze UI Active State Button</strong>
<br>
<span class="c-input-group">
<button type="button" class="c-button">
Button
</button>
<button type="button" class="c-button c-button--active">
Button active
</button>
</span>
</center>
</body>
</html>
|
Output:
Blaze UI Button Active State
Example 2: This example demonstrates the all-colored variation of the active state button in Blaze UI.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Blaze UI Active State Button</strong>
<br>
<span class="c-input-group">
<button type="button" class="c-button
c-button--brand">Button</button>
<button type="button" class="c-button
c-button--active c-button--brand">
Button active
</button>
</span>
<br /><br />
<span class="c-input-group">
<button type="button" class="c-button
c-button--info">Button</button>
<button type="button" class="c-button
c-button--active c-button--info">
Button active
</button>
</span>
<br /><br />
<span class="c-input-group">
<button type="button" class="c-button
c-button--success">Button</button>
<button type="button" class="c-button
c-button--active c-button--success">
Button active
</button>
</span>
<br /><br />
<span class="c-input-group">
<button type="button" class="c-button
c-button--error">Button</button>
<button type="button" class="c-button
c-button--active c-button--error">
Button active
</button>
</span>
<br /><br />
<span class="c-input-group">
<button type="button" class="c-button
c-button--warning">Button</button>
<button type="button" class="c-button
c-button--active c-button--warning">
Button active
</button>
</span>
</center>
</body>
</html>
|
Output:
Blaze UI Button Active State
Reference: https://www.blazeui.com/components/buttons/