Blaze UI Full Width Buttons
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
Share your thoughts in the comments
Please Login to comment...