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.
<!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.
<!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/