Open In App

Blaze UI Basics Button

Improve
Improve
Like Article
Like
Save
Share
Report

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 the functionality of creating a simple button with the help of the Basics Button component.

Blaze UI Basics Button Class:

  • .c-button: This class is used to create a simple basic button.

Syntax:

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

Example 1: The following example demonstrates the use of the c-button class to create a simple basic button.

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">
    <title>Document</title>
    <link rel="stylesheet" href=
</head>
<body>
    <h1 class="c-heading">
     GeeksforGeeks
        <div class="c-heading__sub">
            Blaze UI Basics Button 
        </div>
    </h1>
    <br>
      <!--Basics Button-->
    <button type="button" class="c-button">
        Button 1
    </button>
    <button type="button" class="c-button">
        Button 2
    </button>
    <button type="button" class="c-button">
        Button 3
    </button>
</body>
</html>


Output:

 

Example 2: The following example demonstrates the c-button class with the help of which we can create a disabled button and a link button.

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">
    <title>Document</title>
    <link rel="stylesheet" href=
</head>
<body>
    <h1 class="c-heading">
     GeeksforGeeks
        <div class="c-heading__sub">
            Blaze UI Basics Button 
        </div>
    </h1>
    <br>
    <!--Basics Button-->
    <button type="button" class="c-button">
        Button 1
    </button>
    <!--Disabled Button-->
    <button type="button" class="c-button" disabled>
        Disabled Button
    </button>
    <!--Link Button-->
    <a class="c-button">
        Link Button
    </a>
</body>
</html>


Output:

 

Reference Link: https://www.blazeui.com/components/buttons



Last Updated : 12 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads