Blaze CSS is a framework-free open source UI toolkit. It 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 a lot of varieties of buttons and one such variety is known as Full Ghost Buttons. The Full Ghost Button component provides us with the functionality of removing the body of the button.
Blaze UI Full Ghost Buttons Classes:
- c-button–ghost: This class is used to create a ghost button.
Syntax:
<button type="button" class="c-button c-button--ghost">
...
</button>Example 1: The following example demonstrates the use of the c-button–ghost class to create a full ghost button.
<!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> Blaze UI Full Ghost Buttons </title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Full Ghost Buttons
</div>
</h1>
<br>
<button type="button" class="c-button c-button--ghost">
<!--Ghost Button-->
Ghost Button 1
</button>
<button type="button" class="c-button c-button--ghost">
Ghost Button 2
</button>
<button type="button" class="c-button c-button--ghost">
Ghost Button 3
</button>
</body>
</html>
|
Output:
Example 2: The following example demonstrates the difference between a simple basic button and a full ghost button.
<!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> Blaze UI Full Ghost Buttons </title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Full Ghost Buttons
</div>
</h1>
<br>
<button type="button" class="c-button">
<!--Basic Button-->
Basic Button 1
</button>
<button type="button" class="c-button">
Basic Button 2
</button>
<button type="button" class="c-button c-button--ghost">
<!--Ghost Button-->
Ghost Button 1
</button>
<button type="button" class="c-button c-button--ghost">
Ghost Button 2
</button>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/buttons