Open In App

Blaze UI Full Width Buttons

Improve
Improve
Like Article
Like
Save
Share
Report

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. Blaze UI full-width buttons are used to create the full-width buttons using the below class.

Blaze UI full-width buttons class:

  • c-button–block: This class is used to create a full-width button in blaze UI.

Syntax:

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

Example 1: This example demonstrates the Blaze UI full-width buttons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Full Width Buttons </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered ">
        <h1 style="color:green;"
            GeeksforGeeks 
        </h1>
        <h3> Blaze UI Full Width Buttons </h3>
  
        <button type="button" class=
                "c-button c-button--block u-xsmall">
            GeeksforGeeks Extra small
        </button> <br> <br>
  
        <button type="button" class=
                "c-button c-button--block u-small">
            GeeksforGeeks Small
        </button> <br> <br>
  
        <button type="button" class=
                "c-button c-button--block u-medium">
            GeeksforGeeks Medium
        </button> <br> <br>
    </div>
</body>
</html>


Output:

 

Example 2: This example demonstrates the Blaze UI full-width buttons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Full Width Buttons </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered ">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3> Blaze UI Full Width Buttons </h3>
  
        <button type="button" class=
                "c-button c-button--block u-large">
            GeeksforGeeks Large
        </button> <br> <br>
  
        <button type="button" class=
                "c-button c-button--block u-xlarge">
            GeeksforGeeks Extra Large
        </button> <br> <br>
  
        <button type="button" class=
                "c-button c-button--block u-super">
            GeeksforGeeks Super
        </button> <br> <br>
    </div>
</body>
</html>


Output:

 

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



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