Blaze CSS es un kit de herramientas de interfaz de usuario de código abierto sin marco que proporciona una excelente estructura para crear 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 nos proporciona varios colores fantasma de botón para diseñar.
Clases de Blaze CSS Button Ghost Colors:
- c-button: esta clase se utiliza para crear un botón básico simple.
- c-button–ghost: esta clase se utiliza para definir el botón como un botón fantasma.
- c-button–brand: esta clase se utiliza para definir botones fantasma de color gris.
- c-button–info: esta clase se utiliza para definir botones fantasma de color azul.
- c-button–warning: esta clase se utiliza para definir el botón fantasma de color amarillo.
- c-button–success: esta clase se utiliza para definir el botón fantasma de color verde.
- c-button–error: Esta clase se usa para definir el botón fantasma de color rojo.
Sintaxis:
<button type="button" class="c-button
c-button--ghost c-button--brand">
...
</button>
Ejemplo 1: Este ejemplo demuestra el uso de Blaze CSS Button Ghost Colors usando las clases c-button–brand y c-button–info .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze CSS Button Ghost Colors</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <div class="u-centered"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Blaze CSS Button Ghost Colors</h2> <button type="button" class="c-button"> Basic-Button </button> <button type="button" class="c-button c-button--brand"> Brand-Button </button> <button type="button" class="c-button c-button--info"> Info-Button </button> </div> </body> </html>
Producción:
Blaze CSS Botón Fantasma Colores
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Blaze CSS Button Ghost Colors utilizando las clases c-button–success, c-Button–warning y c-button–error .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze CSS Button Ghost Colors </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <div class="u-centered"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Blaze CSS Button Ghost Colors</h2> <button type="button" class="c-button c-button--warning"> Warning-Button </button> <button type="button" class="c-button c-button--success"> Success-Button </button> <button type="button" class="c-button c-button--error"> Error-Button </button> </div> </body> </html>
Producción:
Blaze CSS Botón Fantasma Colores
Referencia: https://www.blazeui.com/components/buttons/