Blaze UI Basics Button
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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 class = "c-heading" > w3wiki < 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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 class = "c-heading" > w3wiki < 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
Contact Us