Blaze CSS es un conjunto de herramientas de interfaz de usuario de código abierto sin marco. Proporciona una gran estructura para construir sitios web rápidamente con una base escalable y mantenible. Es de naturaleza receptiva, ya que todos los componentes se desarrollan primero para dispositivos móviles y funcionan en cualquier tamaño de pantalla.
Un botón es un componente importante en cualquier sitio web que se utiliza para generar eventos cada vez que el usuario hace clic en el botón. Blaze UI proporciona una gran variedad de botones y una de esas variedades se conoce como Full Ghost Buttons . El componente Full Ghost Button nos brinda la funcionalidad de eliminar el cuerpo del botón.
Blaze UI Full Ghost Buttons Clases:
- c-button–ghost: esta clase se usa para crear un botón fantasma.
Sintaxis:
<button type="button" class="c-button c-button--ghost">
...
</button>
Ejemplo 1: El siguiente ejemplo demuestra el uso de la clase c-button–ghost para crear un botón fantasma completo.
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> Blaze UI Full Ghost Buttons </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </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>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la diferencia entre un botón básico simple y un botón fantasma completo.
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> Blaze UI Full Ghost Buttons </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </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>
Producción:
Referencia: https://www.blazeui.com/components/buttons
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA